流れて出るAIアシスタントのチャット画面

<!doctype html>
<!-- Vibehaus — CC0。外部依存なし。固定文を表示するデモで、AI接続・送信・保存は行わない。 -->
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>流れて出るAIアシスタントのチャット画面 — Vibehaus プレビュー</title>
    <style>
      :root {
        --bg: #fafaf8;
        --side: #f1f0ec;
        --panel: #ffffff;
        --line: #e4e2dc;
        --ink: #1d1c1a;
        --muted: #6b6860;
        --quiet: #8f8b82;
        --user: #eceae4;
        --accent: #d4622a;
        --accent-ink: #ffffff;
        --code: #1f1e1c;
        --code-ink: #efece6;
        --radius: 14px;
        --font: "Inter", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
        --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      }
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        font-family: var(--font);
        font-size: 15px;
        line-height: 1.8;
        letter-spacing: 0;
        color: var(--ink);
        background: var(--bg);
      }
      button, textarea { font: inherit; color: inherit; }
      button { cursor: pointer; }
      .app { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: 100%; }

      /* ---------- 履歴 ---------- */
      .side {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 1rem 0.75rem;
        background: var(--side);
        border-right: 1px solid var(--line);
        overflow-y: auto;
      }
      .new {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.8rem;
        font-weight: 600;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 10px;
      }
      .new:hover { border-color: var(--quiet); }
      .group { margin: 0.9rem 0.5rem 0.25rem; font-size: 12px; font-weight: 600; color: var(--quiet); }
      .hist {
        display: block;
        padding: 0.45rem 0.6rem;
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink);
        text-decoration: none;
        border-radius: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hist:hover { background: #e7e5df; }
      .hist[aria-current="page"] { background: #e2e0d9; font-weight: 600; }
      .side-foot { margin-top: auto; padding: 0.75rem 0.5rem 0; font-size: 12px; color: var(--quiet); }

      /* ---------- 会話 ---------- */
      .main { display: flex; flex-direction: column; min-width: 0; height: 100%; }
      .top {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid var(--line);
        background: color-mix(in srgb, var(--bg) 88%, transparent);
      }
      .top h1 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
      .model {
        margin-left: auto;
        padding: 0.2rem 0.6rem;
        font-size: 12px;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 999px;
      }
      .menu { display: none; padding: 0.3rem 0.55rem; background: none; border: 1px solid var(--line); border-radius: 8px; }

      .log { flex: 1; overflow-y: auto; padding: 2rem 1.25rem 1rem; }
      .col { max-width: 720px; margin: 0 auto; }
      .msg { margin: 0 0 1.75rem; }
      .msg.user { display: flex; justify-content: flex-end; }
      .msg.user .bubble {
        max-width: 80%;
        padding: 0.7rem 1rem;
        background: var(--user);
        border-radius: 18px 18px 4px 18px;
      }
      .msg.ai { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.9rem; }
      .avatar {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        font-size: 13px;
        font-weight: 700;
        color: var(--accent-ink);
        background: var(--accent);
        border-radius: 50%;
      }
      .body p { margin: 0 0 0.8rem; }
      .body ol { margin: 0 0 0.8rem; padding-left: 1.4rem; }
      .body li + li { margin-top: 0.3rem; }
      .body strong { font-weight: 700; }
      .body code {
        padding: 0.1em 0.35em;
        font-family: var(--mono);
        font-size: 0.88em;
        background: #eeece6;
        border-radius: 4px;
      }
      .codeblock { margin: 0 0 0.9rem; overflow: hidden; background: var(--code); border-radius: 10px; }
      .codebar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0.8rem;
        font-size: 12px;
        color: #b8b3a8;
        background: #2b2a27;
      }
      .codebar button { padding: 0.1rem 0.5rem; font-size: 12px; color: #d8d4cb; background: none; border: 1px solid #4a4843; border-radius: 6px; }
      /* 本文中のインラインコードの地色を、ブロックの中まで持ち込まない */
      .codeblock code { padding: 0; font-size: inherit; color: inherit; background: none; border-radius: 0; }
      .codeblock pre { margin: 0; padding: 0.9rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--code-ink); }
      .actions { display: flex; gap: 0.25rem; margin-top: 0.2rem; }
      .actions button {
        padding: 0.25rem 0.55rem;
        font-size: 12px;
        color: var(--muted);
        background: none;
        border: 1px solid transparent;
        border-radius: 6px;
      }
      .actions button:hover { border-color: var(--line); color: var(--ink); }

      /* 生成中の目印。文字の後ろに置く四角いカーソル */
      .caret {
        display: inline-block;
        width: 0.55em;
        height: 1.05em;
        margin-left: 2px;
        vertical-align: -0.15em;
        background: var(--ink);
        animation: blink 1s steps(1) infinite;
      }
      @keyframes blink { 50% { opacity: 0; } }

      /* ---------- 入力 ---------- */
      .composer { padding: 0.75rem 1.25rem 1.1rem; background: var(--bg); }
      .suggest { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
      .chip {
        padding: 0.35rem 0.8rem;
        font-size: 13px;
        color: var(--muted);
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 999px;
      }
      .chip:hover { color: var(--ink); border-color: var(--quiet); }
      .box {
        display: flex;
        align-items: flex-end;
        gap: 0.5rem;
        padding: 0.6rem 0.6rem 0.6rem 1rem;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 20px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
      }
      .box:focus-within { border-color: var(--quiet); }
      textarea {
        flex: 1;
        min-height: 28px;
        max-height: 200px;
        padding: 0.2rem 0;
        line-height: 1.7;
        border: 0;
        outline: 0;
        resize: none;
        background: none;
      }
      .send {
        display: grid;
        place-items: center;
        flex: none;
        width: 36px;
        height: 36px;
        font-size: 16px;
        color: var(--accent-ink);
        background: var(--ink);
        border: 0;
        border-radius: 50%;
      }
      .send:disabled { opacity: 0.3; cursor: default; }
      .send[data-state="stop"] { background: var(--accent); }
      .hint { margin: 0.5rem 0 0; font-size: 12px; color: var(--quiet); text-align: center; }
      .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

      @media (max-width: 760px) {
        .app { grid-template-columns: minmax(0, 1fr); }
        .side { position: fixed; inset: 0 auto 0 0; z-index: 10; width: 264px; transform: translateX(-100%); transition: transform 0.2s; }
        .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.3); }
        .menu { display: block; }
        .msg.user .bubble { max-width: 90%; }
      }
      @media (prefers-reduced-motion: reduce) {
        .caret { animation: none; }
        .side { transition: none; }
      }
      [hidden] { display:none !important; }
      button { min-width:44px; min-height:44px; }
      .hist { min-height:44px; white-space:normal; }
      .send { width:44px; height:44px; }
      .box textarea { min-width:0; overflow-wrap:anywhere; }
      .bubble,.body { min-width:0; overflow-wrap:anywhere; }
      .codeblock pre { white-space:pre-wrap; overflow-wrap:anywhere; }
      .model { flex-shrink:0; }
      .copy-status { margin:0; font-size:12px; line-height:1.8; color:var(--muted); }
      .app { grid-template-rows:minmax(0,1fr); }
      .main,.log { min-height:0; }
      .history-close { display:none; }
      @media (max-width:760px) { .side:not(.open) { visibility:hidden; } .history-close { display:block; } }
    </style>
  </head>
  <body>
    <div class="app">
      <nav class="side" id="side" aria-label="会話の履歴">
        <button type="button" class="history-close">履歴を閉じる ×</button>
        <button class="new" type="button">＋ 新しい会話</button>
        <p class="group">今日</p>
        <a class="hist" href="#" aria-current="page">料金表のレイアウト相談</a>
        <a class="hist" href="#">問い合わせフォームの項目整理</a>
        <p class="group">過去7日間</p>
        <a class="hist" href="#">採用ページの見出し案</a>
        <a class="hist" href="#">ダークモードの配色レビュー</a>
        <a class="hist" href="#">議事録の要約テンプレート</a>
        <a class="hist" href="#">Tailwind のクラス整理</a>
        <p class="side-foot">履歴は表示見本です。会話は保存せず、再読み込みで初期状態に戻ります。</p>
      </nav>

      <main class="main">
        <header class="top">
          <button class="menu" type="button" aria-controls="side" aria-expanded="false">☰<span class="sr">履歴を開く</span></button>
          <h1>料金表のレイアウト相談</h1>
          <span class="model">標準モデル</span>
        </header>

        <div class="log" id="log" role="log" aria-live="polite" aria-label="会話">
          <div class="col" id="col">
            <div class="msg user">
              <div class="bubble">SaaS の料金表を3プランで作りたいです。真ん中を選ばせたいとき、何を気をつければいいですか？</div>
            </div>

            <div class="msg ai">
              <div class="avatar" aria-hidden="true">A</div>
              <div class="body">
                <p>真ん中のプランを選ばせるときに効くのは、<strong>比較のしやすさを崩さずに、1枚だけ目立たせる</strong>ことです。要点は3つあります。</p>
                <ol>
                  <li><strong>推奨の印は1枚だけ。</strong>複数に付けると推奨という意味が消えます。</li>
                  <li><strong>行の高さを揃える。</strong>機能の行がずれると、比較の視線が途切れます。</li>
                  <li><strong>年額と月額の切り替えは表の上に。</strong>下に置くと、切り替えたことに気づかれません。</li>
                </ol>
                <p>カードの高さを揃えるだけなら、CSS はこれで足ります。</p>
                <div class="codeblock">
                  <div class="codebar"><span>css</span><button type="button" data-copy>コピー</button></div>
                  <pre><code>.plans { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.plan  { display: flex; flex-direction: column; }
.plan .cta { margin-top: auto; }</code></pre>
                </div>
                <div class="actions">
                  <button type="button" data-copy>コピー</button>
                  <button type="button">再生成</button>
                  <button type="button" aria-label="役に立った">👍</button>
                  <button type="button" aria-label="役に立たなかった">👎</button>
                </div>
              </div>
            </div>

            <div class="msg user">
              <div class="bubble">推奨プランの見出しは、どう書くと押しつけがましくなりませんか？</div>
            </div>
          </div>
        </div>

        <div class="composer">
          <div class="suggest" id="suggest" hidden>
            <button class="chip" type="button">比較表の行の順番は？</button>
            <button class="chip" type="button">無料プランは置くべき？</button>
            <button class="chip" type="button">スマホではどう並べる？</button>
          </div>
          <form class="box" id="form">
            <label class="sr" for="input">メッセージ</label>
            <textarea id="input" rows="1" placeholder="メッセージを入力（Enter で送信、Shift＋Enter で改行）"></textarea>
            <button class="send" id="send" type="submit" aria-label="送信" disabled>↑</button>
          </form>
          <p class="hint">固定文を表示するデモです。AI接続・外部送信・会話の保存はありません。</p>
          <p class="copy-status" id="copy-status" role="status"></p>
        </div>
      </main>
    </div>

    <script>
      const log = document.getElementById("log");
      const col = document.getElementById("col");
      const form = document.getElementById("form");
      const input = document.getElementById("input");
      const send = document.getElementById("send");
      const suggest = document.getElementById("suggest");
      const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;

      const REPLIES = [
        "「おすすめ」より「いちばん選ばれています」のように、事実として書くと押しつけがましさが消えます。選んだ人の割合が出せるなら、それを添えるのがいちばん自然です。数字が無いなら「迷ったらこれ」くらいに留め、他の2枚を下げる言葉は使わないでください。",
        "比較表の行は、選ぶ理由になる順に上から並べます。価格の次に、プラン間で差がつく項目を置き、全プラン共通の項目は最後にまとめると、差分だけを追って読めます。",
      ];
      let turn = 0;
      let timer = null;
      let initial;

      // 下端付近にいるときだけ追従する。読み返している人を引き戻さない
      const nearBottom = () => log.scrollHeight - log.scrollTop - log.clientHeight < 80;
      const follow = (was) => { if (was) log.scrollTop = log.scrollHeight; };

      function addUser(text) {
        const m = document.createElement("div");
        m.className = "msg user";
        const b = document.createElement("div");
        b.className = "bubble";
        b.textContent = text;
        m.append(b);
        col.append(m);
        // 自分の送信は、どこを読んでいても必ず最下部へ連れて行く
        log.scrollTop = log.scrollHeight;
      }

      function stream(text) {
        const m = document.createElement("div");
        m.className = "msg ai";
        m.innerHTML = '<div class="avatar" aria-hidden="true">A</div><div class="body"><p></p></div>';
        col.append(m);
        const p = m.querySelector("p");
        const caret = document.createElement("span");
        caret.className = "caret";
        caret.setAttribute("aria-hidden", "true");

        // 生成中は読み上げを止め、終わってから全文を1回だけ伝える
        log.setAttribute("aria-busy", "true");
        setStreaming(true);

        if (reduce) {
          p.textContent = text;
          return done();
        }
        let i = 0;
        timer = setInterval(() => {
          const was = nearBottom();
          i = Math.min(text.length, i + 2);
          p.textContent = text.slice(0, i);
          p.append(caret);
          follow(was);
          if (i >= text.length) done();
        }, 28);

        function done() {
          clearInterval(timer);
          timer = null;
          caret.remove();
          log.setAttribute("aria-busy", "false");
          setStreaming(false);
          suggest.hidden = false;
        }
        stop = () => { p.textContent = p.textContent + "（中断しました）"; done(); };
      }
      let stop = () => {};

      function setStreaming(on) {
        send.dataset.state = on ? "stop" : "send";
        send.setAttribute("aria-label", on ? "生成を止める" : "送信");
        send.textContent = on ? "■" : "↑";
        send.disabled = on ? false : input.value.trim() === "";
      }

      function submit(text) {
        if (!text.trim()) return;
        clearTimeout(initial);
        addUser(text.trim());
        input.value = "";
        grow();
        suggest.hidden = true;
        stream(REPLIES[turn++ % REPLIES.length]);
      }

      function sendOrStop(e) {
        e.preventDefault();
        if (timer) return stop();
        submit(input.value);
      }
      form.addEventListener('submit', sendOrStop);
      // sandboxのallow-formsを広げず、クリックからページ内のデモだけを実行する。
      send.addEventListener('click', sendOrStop);

      // Enter で送信。ただし日本語入力の変換を確定する Enter では送らない。
      // isComposing が true の間、および keyCode 229（Safari の確定直後）は無視する
      input.addEventListener("keydown", (e) => {
        if (e.key !== "Enter" || e.shiftKey) return;
        if (e.isComposing || e.keyCode === 229) return;
        e.preventDefault();
        if (!timer) submit(input.value);
      });

      // 入力に合わせて高さを伸ばす（上限は CSS の max-height）
      function grow() {
        input.style.height = "auto";
        input.style.height = input.scrollHeight + "px";
        if (!timer) send.disabled = input.value.trim() === "";
      }
      input.addEventListener("input", grow);

      suggest.addEventListener("click", (e) => {
        const chip = e.target.closest(".chip");
        if (chip && !timer) submit(chip.textContent);
      });

      document.addEventListener("click", async (e) => {
        const btn = e.target.closest("[data-copy]");
        if (!btn) return;
        const src = btn.closest(".codeblock")?.querySelector("pre") ?? btn.closest(".body");
        const clone = src.cloneNode(true);
        clone.querySelectorAll('.actions,.codebar').forEach(node => node.remove());
        const value = src.matches('pre') ? src.textContent : clone.textContent.trim();
        const status = document.getElementById('copy-status');
        btn.disabled = true;
        try {
          if (!navigator.clipboard) throw new Error('unavailable');
          await navigator.clipboard.writeText(value);
          status.textContent = 'コピーしました。';
        } catch {
          status.textContent = 'コピーできませんでした。本文を選択しました。手動でコピーしてください。';
          src.tabIndex = -1; src.focus();
          const range = document.createRange(); range.selectNodeContents(src);
          const selection = getSelection(); selection.removeAllRanges(); selection.addRange(range);
        } finally { btn.disabled = false; }
      });

      const side = document.getElementById("side");
      const menu = document.querySelector(".menu");
      document.querySelector('.history-close').addEventListener('click', () => {
        side.classList.remove('open'); menu.setAttribute('aria-expanded','false'); menu.focus();
      });
      menu.addEventListener("click", () => {
        const open = side.classList.toggle("open");
        menu.setAttribute("aria-expanded", String(open));
      });
      document.addEventListener('keydown', event => {
        if (event.key === 'Escape' && side.classList.contains('open')) {
          side.classList.remove('open'); menu.setAttribute('aria-expanded','false'); menu.focus();
        }
      });
      document.querySelector('.new').addEventListener('click', () => {
        clearTimeout(initial);
        if (timer) stop();
        col.replaceChildren(); turn = 0; input.value = ''; grow(); suggest.hidden = false;
        document.querySelector('.top h1').textContent = '新しい会話';
        side.classList.remove('open'); menu.setAttribute('aria-expanded','false'); input.focus();
      });
      side.querySelectorAll('.hist').forEach(link => link.addEventListener('click', event => {
        event.preventDefault(); document.getElementById('copy-status').textContent = '履歴は表示見本です。過去の会話は保存していません。';
      }));
      document.querySelectorAll('.actions button:not([data-copy])').forEach(button => button.addEventListener('click', () => {
        document.getElementById('copy-status').textContent = '再生成・評価は表示見本です。外部への送信はありません。';
      }));

      // 最後の質問への応答を、開いた時点で流して見せる
      log.scrollTop = log.scrollHeight;
      initial = setTimeout(() => { if (!timer) stream(REPLIES[turn++ % REPLIES.length]); }, 500);
      window.addEventListener('pagehide', () => { clearTimeout(initial); clearInterval(timer); });
    </script>
  </body>
</html>