@folio-agent/widget 0.4.0 → 0.5.0

package/README.md

@@ -18,6 +18,6 @@ npm install @folio-agent/widget
 </script>
 ```
 
-配色・フォントは CSS カスタムプロパティ6トークン（`--folio-agent-surface` / `text` / `muted` / `accent` / `accent-contrast` / `font`）で上書きできる。未指定時は既定デザインのまま動く。
+配色・フォントは CSS カスタムプロパティ6トークン（`--folio-agent-surface` / `text` / `muted` / `accent` / `accent-contrast` / `font`）で上書きできる。未指定時はホストの配色に合わせる。変える場合も `surface` / `text` / `accent` の3色で足り、残りはこの3色から導出する。
 
-UI 文言は `lang="en"` 属性で英語に切り替えられる（未指定は日本語）。
+UI 文言は `lang="en"` 属性で英語に切り替えられる（未指定は日本語）。パネルの見出し・案内文・質問候補は `heading` / `greeting` / `suggestions`（`|` 区切り）属性で差し替えられる。

package/dist/styles.d.ts

@@ -1 +1 @@
-export declare const WIDGET_STYLES = "\n  :host {\n    all: initial;\n    color: inherit;\n    color-scheme: inherit;\n    font-family: var(--folio-agent-font, inherit);\n  }\n  .toggle {\n    position: fixed;\n    right: 20px;\n    bottom: 20px;\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    border: none;\n    background: var(--folio-agent-accent, CanvasText);\n    color: var(--folio-agent-accent-contrast, Canvas);\n    font-size: 24px;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\n    z-index: 2147483000;\n  }\n  .panel {\n    position: fixed;\n    right: 20px;\n    bottom: 88px;\n    width: 320px;\n    max-height: 420px;\n    display: flex;\n    flex-direction: column;\n    background: var(--folio-agent-surface, Canvas);\n    border-radius: 12px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n    overflow: hidden;\n    z-index: 2147483000;\n  }\n  .panel[hidden] {\n    display: none;\n  }\n  .messages {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--folio-agent-text, CanvasText);\n  }\n  .message {\n    white-space: pre-wrap;\n  }\n  .message.assistant {\n    align-self: flex-start;\n    background: color-mix(in srgb, var(--folio-agent-text, CanvasText) 8%, var(--folio-agent-surface, Canvas));\n    border: 1px solid color-mix(in srgb, var(--folio-agent-text, CanvasText) 16%, var(--folio-agent-surface, Canvas));\n    border-radius: 8px;\n    padding: 10px 14px;\n  }\n  .message.user {\n    align-self: flex-end;\n    background: color-mix(in srgb, var(--folio-agent-text, CanvasText) 14%, var(--folio-agent-surface, Canvas));\n    border: 1px solid color-mix(in srgb, var(--folio-agent-text, CanvasText) 24%, var(--folio-agent-surface, Canvas));\n    border-radius: 8px;\n    padding: 10px 14px;\n  }\n  .disclosure {\n    font-size: 12px;\n    color: var(--folio-agent-muted, color-mix(in srgb, CanvasText 55%, Canvas));\n    padding: 0 0 4px;\n  }\n  .disclosure a {\n    color: #2563eb;\n  }\n  form {\n    display: flex;\n    border-top: 1px solid color-mix(in srgb, CanvasText 16%, Canvas);\n  }\n  input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    color: inherit;\n    padding: 10px;\n    font-size: 14px;\n  }\n  input:focus {\n    outline: none;\n  }\n  button[type=\"submit\"] {\n    border: none;\n    background: none;\n    padding: 0 14px;\n    cursor: pointer;\n    color: var(--folio-agent-accent, CanvasText);\n    font-weight: 600;\n  }\n";
+export declare const WIDGET_STYLES = "\n  :host {\n    all: initial;\n    color: inherit;\n    color-scheme: inherit;\n    font-family: var(--folio-agent-font, inherit);\n\n    --_surface: var(--folio-agent-surface, Canvas);\n    --_text: var(--folio-agent-text, CanvasText);\n    --_accent: var(--folio-agent-accent, var(--_text));\n    --_accent-contrast: var(--folio-agent-accent-contrast, var(--_surface));\n    --_muted: var(--folio-agent-muted, color-mix(in srgb, var(--_text) 62%, var(--_surface)));\n    --_hair: color-mix(in srgb, var(--_text) 12%, transparent);\n    --_glass: color-mix(in srgb, var(--_surface) 76%, transparent);\n    --_glass-strong: color-mix(in srgb, var(--_surface) 94%, transparent);\n    --_field: color-mix(in srgb, var(--_text) 5%, color-mix(in srgb, var(--_surface) 80%, transparent));\n    --_chip: color-mix(in srgb, var(--_surface) 60%, transparent);\n    --_focus: color-mix(in srgb, var(--_accent) 70%, var(--_text));\n  }\n  * {\n    box-sizing: border-box;\n  }\n  button,\n  textarea {\n    font: inherit;\n  }\n  svg {\n    display: block;\n  }\n\n  .toggle {\n    position: fixed;\n    right: 20px;\n    bottom: calc(20px + env(safe-area-inset-bottom, 0px));\n    z-index: 2147483000;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    height: 46px;\n    padding: 0 18px 0 14px;\n    border-radius: 999px;\n    border: 1px solid color-mix(in srgb, var(--_accent-contrast) 14%, transparent);\n    background: color-mix(in srgb, var(--_accent) 88%, transparent);\n    -webkit-backdrop-filter: blur(16px) saturate(1.6);\n    backdrop-filter: blur(16px) saturate(1.6);\n    color: var(--_accent-contrast);\n    font-size: 14px;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    cursor: pointer;\n    box-shadow: 0 10px 30px rgba(16, 20, 28, 0.22);\n    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;\n  }\n  .toggle:hover {\n    transform: translateY(-1px);\n  }\n  .toggle:active {\n    transform: scale(0.97);\n  }\n  .toggle svg {\n    width: 20px;\n    height: 20px;\n    flex: none;\n  }\n  .root.open .toggle {\n    opacity: 0;\n    transform: scale(0.85);\n    pointer-events: none;\n  }\n\n  .panel {\n    position: fixed;\n    right: 20px;\n    bottom: calc(20px + env(safe-area-inset-bottom, 0px));\n    z-index: 2147483001;\n    width: min(400px, calc(100vw - 40px));\n    height: min(620px, calc(100dvh - 40px));\n    display: flex;\n    flex-direction: column;\n    border-radius: 22px;\n    border: 1px solid var(--_hair);\n    background: var(--_glass);\n    -webkit-backdrop-filter: blur(28px) saturate(1.8);\n    backdrop-filter: blur(28px) saturate(1.8);\n    box-shadow: 0 24px 64px rgba(16, 20, 28, 0.2), 0 2px 6px rgba(16, 20, 28, 0.08);\n    color: var(--_text);\n    overflow: hidden;\n    transform-origin: calc(100% - 40px) calc(100% - 20px);\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(10px) scale(0.9);\n    transition:\n      opacity 0.2s ease,\n      transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),\n      visibility 0s linear 0.32s;\n  }\n  .root.open .panel {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n    transition:\n      opacity 0.22s ease,\n      transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.05),\n      visibility 0s;\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 12px 12px 18px;\n    border-bottom: 1px solid var(--_hair);\n  }\n  .titles {\n    flex: 1;\n    min-width: 0;\n  }\n  .heading {\n    font-size: 15px;\n    font-weight: 700;\n    line-height: 1.3;\n  }\n  .subheading {\n    font-size: 12px;\n    line-height: 1.4;\n    color: var(--_muted);\n  }\n  .close {\n    flex: none;\n    display: grid;\n    place-items: center;\n    width: 34px;\n    height: 34px;\n    border: 0;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--_text) 7%, transparent);\n    color: var(--_text);\n    cursor: pointer;\n  }\n  .close:hover {\n    background: color-mix(in srgb, var(--_text) 12%, transparent);\n  }\n  .close svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  .messages {\n    flex: 1;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    padding: 18px 18px 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    font-size: 15px;\n    line-height: 1.7;\n  }\n  .message,\n  .greeting {\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    animation: fade-in 0.28s ease both;\n  }\n  .message.assistant,\n  .greeting {\n    align-self: stretch;\n  }\n  .message.user {\n    align-self: flex-end;\n    max-width: 85%;\n    padding: 8px 14px;\n    border-radius: 18px 18px 6px 18px;\n    background: color-mix(in srgb, var(--_accent) 14%, var(--_surface));\n    border: 1px solid color-mix(in srgb, var(--_accent) 28%, var(--_surface));\n  }\n  @keyframes fade-in {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: none; }\n  }\n\n  .suggestions {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  .suggestions button {\n    padding: 7px 14px;\n    border: 1px solid var(--_hair);\n    border-radius: 999px;\n    background: var(--_chip);\n    color: var(--_text);\n    font-size: 14px;\n    text-align: left;\n    cursor: pointer;\n    transition: background 0.15s ease;\n  }\n  .suggestions button:hover {\n    background: color-mix(in srgb, var(--_text) 8%, transparent);\n  }\n\n  .typing {\n    display: inline-flex;\n    gap: 5px;\n    padding: 8px 0;\n  }\n  .typing span {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: var(--_muted);\n    animation: typing-dot 1.1s ease-in-out infinite;\n  }\n  .typing span:nth-child(2) {\n    animation-delay: 0.15s;\n  }\n  .typing span:nth-child(3) {\n    animation-delay: 0.3s;\n  }\n  @keyframes typing-dot {\n    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }\n    40% { opacity: 1; transform: translateY(-3px); }\n  }\n\n  form {\n    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));\n  }\n  .field {\n    display: flex;\n    align-items: flex-end;\n    gap: 8px;\n    padding: 6px 6px 6px 14px;\n    border: 1px solid var(--_hair);\n    border-radius: 22px;\n    background: var(--_field);\n    transition: border-color 0.15s ease;\n  }\n  .field:focus-within {\n    border-color: color-mix(in srgb, var(--_text) 32%, transparent);\n  }\n  textarea {\n    flex: 1;\n    min-width: 0;\n    max-height: 144px;\n    padding: 6px 0;\n    border: 0;\n    outline: 0;\n    resize: none;\n    background: transparent;\n    color: var(--_text);\n    /* 16px \u672A\u6E80\u3060\u3068 iOS Safari \u304C\u30D5\u30A9\u30FC\u30AB\u30B9\u6642\u306B\u30DA\u30FC\u30B8\u3092\u62E1\u5927\u3059\u308B */\n    font-size: 16px;\n    line-height: 1.5;\n  }\n  textarea::placeholder {\n    color: var(--_muted);\n  }\n  .send {\n    flex: none;\n    display: grid;\n    place-items: center;\n    width: 34px;\n    height: 34px;\n    border: 0;\n    border-radius: 50%;\n    background: var(--_accent);\n    color: var(--_accent-contrast);\n    cursor: pointer;\n    transition: opacity 0.15s ease, transform 0.15s ease;\n  }\n  .send:disabled {\n    opacity: 0.25;\n    cursor: default;\n  }\n  .send:not(:disabled):active {\n    transform: scale(0.92);\n  }\n  .send svg {\n    width: 18px;\n    height: 18px;\n  }\n  .disclosure {\n    margin: 8px 0 0;\n    font-size: 11px;\n    line-height: 1.5;\n    text-align: center;\n    color: var(--_muted);\n  }\n  .disclosure a {\n    color: inherit;\n  }\n\n  .toggle:focus-visible,\n  .close:focus-visible,\n  .send:focus-visible,\n  .suggestions button:focus-visible {\n    outline: 2px solid var(--_focus);\n    outline-offset: 2px;\n  }\n\n  @media (max-width: 640px) {\n    .toggle {\n      right: 16px;\n      bottom: calc(16px + env(safe-area-inset-bottom, 0px));\n    }\n    /* \u9AD8\u3055\u3068\u4E0A\u7AEF\u306F visualViewport \u304B\u3089 JS \u304C\u6D41\u3057\u8FBC\u3080\u3002\u30AD\u30FC\u30DC\u30FC\u30C9\u8868\u793A\u4E2D\u3082\u5165\u529B\u6B04\u3092\u898B\u3048\u308B\u4F4D\u7F6E\u306B\u4FDD\u3064\u305F\u3081 */\n    .panel {\n      top: var(--vv-top, 0px);\n      right: 0;\n      bottom: auto;\n      left: 0;\n      width: 100%;\n      height: var(--vv-height, 100dvh);\n      border: 0;\n      border-radius: 0;\n      background: var(--_glass-strong);\n      transform-origin: 50% 100%;\n      transform: translateY(32px);\n    }\n    .header {\n      padding-top: calc(12px + env(safe-area-inset-top, 0px));\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .toggle,\n    .panel,\n    .root.open .panel {\n      transform: none;\n    }\n    .panel {\n      transition: opacity 0.15s linear, visibility 0s linear 0.15s;\n    }\n    .root.open .panel {\n      transition: opacity 0.15s linear;\n    }\n    .message,\n    .greeting,\n    .typing span {\n      animation: none;\n    }\n  }\n";

package/dist/styles.js

@@ -1,104 +1,350 @@
 // テーマ注入: 利用側サイトのグローバルCSSで
 //   folio-agent-widget { --folio-agent-accent: #...; }
 // のようにカスタムプロパティを指定するとShadow DOM内に継承されテーマが反映される。
-// 未指定の場合は各プロパティがホスト配色（CSSシステムカラー）から導出した値を使い、
-// サイトのライト/ダークいずれの配色にも自動で馴染む。
+// 決めるのは surface / text / accent の3色で足り、境界線・吹き出し・入力欄などは
+// すべてこの3色から color-mix で導出する。未指定の場合はホスト配色（CSSシステムカラー）
+// から導出し、サイトのライト/ダークいずれの配色にも自動で馴染む。
 export const WIDGET_STYLES = `
   :host {
     all: initial;
     color: inherit;
     color-scheme: inherit;
     font-family: var(--folio-agent-font, inherit);
+
+    --_surface: var(--folio-agent-surface, Canvas);
+    --_text: var(--folio-agent-text, CanvasText);
+    --_accent: var(--folio-agent-accent, var(--_text));
+    --_accent-contrast: var(--folio-agent-accent-contrast, var(--_surface));
+    --_muted: var(--folio-agent-muted, color-mix(in srgb, var(--_text) 62%, var(--_surface)));
+    --_hair: color-mix(in srgb, var(--_text) 12%, transparent);
+    --_glass: color-mix(in srgb, var(--_surface) 76%, transparent);
+    --_glass-strong: color-mix(in srgb, var(--_surface) 94%, transparent);
+    --_field: color-mix(in srgb, var(--_text) 5%, color-mix(in srgb, var(--_surface) 80%, transparent));
+    --_chip: color-mix(in srgb, var(--_surface) 60%, transparent);
+    --_focus: color-mix(in srgb, var(--_accent) 70%, var(--_text));
   }
+  * {
+    box-sizing: border-box;
+  }
+  button,
+  textarea {
+    font: inherit;
+  }
+  svg {
+    display: block;
+  }
+
   .toggle {
     position: fixed;
     right: 20px;
-    bottom: 20px;
-    width: 56px;
-    height: 56px;
-    border-radius: 50%;
-    border: none;
-    background: var(--folio-agent-accent, CanvasText);
-    color: var(--folio-agent-accent-contrast, Canvas);
-    font-size: 24px;
-    cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
     z-index: 2147483000;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 46px;
+    padding: 0 18px 0 14px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--_accent-contrast) 14%, transparent);
+    background: color-mix(in srgb, var(--_accent) 88%, transparent);
+    -webkit-backdrop-filter: blur(16px) saturate(1.6);
+    backdrop-filter: blur(16px) saturate(1.6);
+    color: var(--_accent-contrast);
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    box-shadow: 0 10px 30px rgba(16, 20, 28, 0.22);
+    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
   }
+  .toggle:hover {
+    transform: translateY(-1px);
+  }
+  .toggle:active {
+    transform: scale(0.97);
+  }
+  .toggle svg {
+    width: 20px;
+    height: 20px;
+    flex: none;
+  }
+  .root.open .toggle {
+    opacity: 0;
+    transform: scale(0.85);
+    pointer-events: none;
+  }
+
   .panel {
     position: fixed;
     right: 20px;
-    bottom: 88px;
-    width: 320px;
-    max-height: 420px;
+    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
+    z-index: 2147483001;
+    width: min(400px, calc(100vw - 40px));
+    height: min(620px, calc(100dvh - 40px));
     display: flex;
     flex-direction: column;
-    background: var(--folio-agent-surface, Canvas);
-    border-radius: 12px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    border-radius: 22px;
+    border: 1px solid var(--_hair);
+    background: var(--_glass);
+    -webkit-backdrop-filter: blur(28px) saturate(1.8);
+    backdrop-filter: blur(28px) saturate(1.8);
+    box-shadow: 0 24px 64px rgba(16, 20, 28, 0.2), 0 2px 6px rgba(16, 20, 28, 0.08);
+    color: var(--_text);
     overflow: hidden;
-    z-index: 2147483000;
+    transform-origin: calc(100% - 40px) calc(100% - 20px);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px) scale(0.9);
+    transition:
+      opacity 0.2s ease,
+      transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
+      visibility 0s linear 0.32s;
+  }
+  .root.open .panel {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    transition:
+      opacity 0.22s ease,
+      transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.05),
+      visibility 0s;
   }
-  .panel[hidden] {
-    display: none;
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 12px 12px 18px;
+    border-bottom: 1px solid var(--_hair);
   }
+  .titles {
+    flex: 1;
+    min-width: 0;
+  }
+  .heading {
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.3;
+  }
+  .subheading {
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--_muted);
+  }
+  .close {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border: 0;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--_text) 7%, transparent);
+    color: var(--_text);
+    cursor: pointer;
+  }
+  .close:hover {
+    background: color-mix(in srgb, var(--_text) 12%, transparent);
+  }
+  .close svg {
+    width: 16px;
+    height: 16px;
+  }
+
   .messages {
     flex: 1;
     overflow-y: auto;
-    padding: 16px;
+    overscroll-behavior: contain;
+    padding: 18px 18px 8px;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--folio-agent-text, CanvasText);
+    gap: 14px;
+    font-size: 15px;
+    line-height: 1.7;
   }
-  .message {
+  .message,
+  .greeting {
     white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    animation: fade-in 0.28s ease both;
   }
-  .message.assistant {
-    align-self: flex-start;
-    background: color-mix(in srgb, var(--folio-agent-text, CanvasText) 8%, var(--folio-agent-surface, Canvas));
-    border: 1px solid color-mix(in srgb, var(--folio-agent-text, CanvasText) 16%, var(--folio-agent-surface, Canvas));
-    border-radius: 8px;
-    padding: 10px 14px;
+  .message.assistant,
+  .greeting {
+    align-self: stretch;
   }
   .message.user {
     align-self: flex-end;
-    background: color-mix(in srgb, var(--folio-agent-text, CanvasText) 14%, var(--folio-agent-surface, Canvas));
-    border: 1px solid color-mix(in srgb, var(--folio-agent-text, CanvasText) 24%, var(--folio-agent-surface, Canvas));
-    border-radius: 8px;
-    padding: 10px 14px;
+    max-width: 85%;
+    padding: 8px 14px;
+    border-radius: 18px 18px 6px 18px;
+    background: color-mix(in srgb, var(--_accent) 14%, var(--_surface));
+    border: 1px solid color-mix(in srgb, var(--_accent) 28%, var(--_surface));
   }
-  .disclosure {
-    font-size: 12px;
-    color: var(--folio-agent-muted, color-mix(in srgb, CanvasText 55%, Canvas));
-    padding: 0 0 4px;
+  @keyframes fade-in {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: none; }
   }
-  .disclosure a {
-    color: #2563eb;
+
+  .suggestions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .suggestions button {
+    padding: 7px 14px;
+    border: 1px solid var(--_hair);
+    border-radius: 999px;
+    background: var(--_chip);
+    color: var(--_text);
+    font-size: 14px;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+  .suggestions button:hover {
+    background: color-mix(in srgb, var(--_text) 8%, transparent);
   }
+
+  .typing {
+    display: inline-flex;
+    gap: 5px;
+    padding: 8px 0;
+  }
+  .typing span {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--_muted);
+    animation: typing-dot 1.1s ease-in-out infinite;
+  }
+  .typing span:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  .typing span:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  @keyframes typing-dot {
+    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
+    40% { opacity: 1; transform: translateY(-3px); }
+  }
+
   form {
+    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
+  }
+  .field {
     display: flex;
-    border-top: 1px solid color-mix(in srgb, CanvasText 16%, Canvas);
+    align-items: flex-end;
+    gap: 8px;
+    padding: 6px 6px 6px 14px;
+    border: 1px solid var(--_hair);
+    border-radius: 22px;
+    background: var(--_field);
+    transition: border-color 0.15s ease;
+  }
+  .field:focus-within {
+    border-color: color-mix(in srgb, var(--_text) 32%, transparent);
   }
-  input {
+  textarea {
     flex: 1;
-    border: none;
+    min-width: 0;
+    max-height: 144px;
+    padding: 6px 0;
+    border: 0;
+    outline: 0;
+    resize: none;
     background: transparent;
-    color: inherit;
-    padding: 10px;
-    font-size: 14px;
+    color: var(--_text);
+    /* 16px 未満だと iOS Safari がフォーカス時にページを拡大する */
+    font-size: 16px;
+    line-height: 1.5;
   }
-  input:focus {
-    outline: none;
+  textarea::placeholder {
+    color: var(--_muted);
   }
-  button[type="submit"] {
-    border: none;
-    background: none;
-    padding: 0 14px;
+  .send {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border: 0;
+    border-radius: 50%;
+    background: var(--_accent);
+    color: var(--_accent-contrast);
     cursor: pointer;
-    color: var(--folio-agent-accent, CanvasText);
-    font-weight: 600;
+    transition: opacity 0.15s ease, transform 0.15s ease;
+  }
+  .send:disabled {
+    opacity: 0.25;
+    cursor: default;
+  }
+  .send:not(:disabled):active {
+    transform: scale(0.92);
+  }
+  .send svg {
+    width: 18px;
+    height: 18px;
+  }
+  .disclosure {
+    margin: 8px 0 0;
+    font-size: 11px;
+    line-height: 1.5;
+    text-align: center;
+    color: var(--_muted);
+  }
+  .disclosure a {
+    color: inherit;
+  }
+
+  .toggle:focus-visible,
+  .close:focus-visible,
+  .send:focus-visible,
+  .suggestions button:focus-visible {
+    outline: 2px solid var(--_focus);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: 640px) {
+    .toggle {
+      right: 16px;
+      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+    }
+    /* 高さと上端は visualViewport から JS が流し込む。キーボード表示中も入力欄を見える位置に保つため */
+    .panel {
+      top: var(--vv-top, 0px);
+      right: 0;
+      bottom: auto;
+      left: 0;
+      width: 100%;
+      height: var(--vv-height, 100dvh);
+      border: 0;
+      border-radius: 0;
+      background: var(--_glass-strong);
+      transform-origin: 50% 100%;
+      transform: translateY(32px);
+    }
+    .header {
+      padding-top: calc(12px + env(safe-area-inset-top, 0px));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toggle,
+    .panel,
+    .root.open .panel {
+      transform: none;
+    }
+    .panel {
+      transition: opacity 0.15s linear, visibility 0s linear 0.15s;
+    }
+    .root.open .panel {
+      transition: opacity 0.15s linear;
+    }
+    .message,
+    .greeting,
+    .typing span {
+      animation: none;
+    }
   }
 `;

package/dist/widget-element.d.ts

@@ -2,5 +2,6 @@ export declare class FolioAgentWidgetElement extends HTMLElement {
     #private;
     static readonly tagName = "folio-agent-widget";
     connectedCallback(): void;
+    disconnectedCallback(): void;
 }
 export declare function defineFolioAgentWidget(tagName?: string): void;

package/dist/widget-element.js

@@ -1,19 +1,31 @@
 import { WIDGET_STYLES } from "./styles.js";
 const WIDGET_TEXT = {
     ja: {
-        toggleAriaLabel: "チャットを開く",
-        inputPlaceholder: "メッセージを入力",
+        toggleLabel: "質問する",
+        headingText: "このサイトについて質問",
+        subheadingText: "公開している情報をもとに AI が答えます",
+        closeLabel: "閉じる",
+        greetingText: "制作実績・記事の内容・仕事の依頼について答えます。",
+        suggestions: ["どんな制作実績がありますか？", "どんな考え方で仕事をしていますか？", "仕事を依頼するには？"],
+        inputPlaceholder: "質問を入力",
         submitLabel: "送信",
+        typingLabel: "回答を作成中",
         disclosureText: "入力内容は品質改善のため記録されます。",
-        policyLinkText: "利用データの扱いについて",
+        policyLinkText: "利用データの扱い",
         configErrorText: "設定エラー: endpoint属性が指定されていません。",
         answerFallbackText: "回答を取得できませんでした。しばらくしてから再度お試しください。",
         networkErrorText: "通信エラーが発生しました。しばらくしてから再度お試しください。",
     },
     en: {
-        toggleAriaLabel: "Open chat",
-        inputPlaceholder: "Type a message",
+        toggleLabel: "Ask",
+        headingText: "Ask about this site",
+        subheadingText: "AI answers from what this site publishes",
+        closeLabel: "Close",
+        greetingText: "Ask about past work, articles, or how to request a project.",
+        suggestions: ["What have you built?", "How do you approach your work?", "How can I request a project?"],
+        inputPlaceholder: "Type a question",
         submitLabel: "Send",
+        typingLabel: "Writing an answer",
         disclosureText: "Your input is logged for quality improvement.",
         policyLinkText: "About data usage",
         configErrorText: "Configuration error: the endpoint attribute is not set.",
@@ -21,99 +33,277 @@ const WIDGET_TEXT = {
         networkErrorText: "A network error occurred. Please try again later.",
     },
 };
+const CHAT_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12.5c0 3.9-3.6 7-8 7-1.1 0-2.2-.2-3.1-.6L4.5 20l1.2-3.4C4.6 15.5 4 14 4 12.5c0-3.9 3.6-7 8-7s8 3.1 8 7Z"/><path d="M9 12.5h.01M12 12.5h.01M15 12.5h.01" stroke-width="2.4"/></svg>`;
+const CLOSE_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>`;
+const SEND_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg>`;
+const COMPACT_QUERY = "(max-width: 640px)";
+const FINE_POINTER_QUERY = "(pointer: fine)";
 function resolveLanguage(value) {
     return value === "en" ? "en" : "ja";
 }
+function matches(query) {
+    return typeof window.matchMedia === "function" && window.matchMedia(query).matches;
+}
+function element(tag, className) {
+    const el = document.createElement(tag);
+    if (className)
+        el.className = className;
+    return el;
+}
 export class FolioAgentWidgetElement extends HTMLElement {
     static tagName = "folio-agent-widget";
     #open = false;
-    #hasShownDisclosure = false;
+    #pending = false;
     #messages = [];
+    #text = WIDGET_TEXT.ja;
+    #rootEl;
+    #toggleEl;
     #panelEl;
+    #closeEl;
     #messagesEl;
+    #suggestionsEl;
+    #typingEl;
     #inputEl;
-    #text = WIDGET_TEXT.ja;
+    #sendEl;
+    #scrollLocked = false;
+    #previousOverflow = "";
+    #onViewportChange = () => this.#syncViewport();
     connectedCallback() {
+        if (this.shadowRoot)
+            return;
         this.#text = WIDGET_TEXT[resolveLanguage(this.getAttribute("lang"))];
         const root = this.attachShadow({ mode: "open" });
         const style = document.createElement("style");
         style.textContent = WIDGET_STYLES;
         root.appendChild(style);
-        const toggle = document.createElement("button");
-        toggle.className = "toggle";
+        const wrapper = element("div", "root");
+        wrapper.append(this.#buildToggle(), this.#buildPanel());
+        root.appendChild(wrapper);
+        this.#rootEl = wrapper;
+    }
+    disconnectedCallback() {
+        this.#watchViewport(false);
+        this.#lockScroll(false);
+    }
+    #buildToggle() {
+        const toggle = element("button", "toggle");
         toggle.type = "button";
-        toggle.setAttribute("aria-label", this.#text.toggleAriaLabel);
-        toggle.textContent = "💬";
-        toggle.addEventListener("click", () => this.#togglePanel());
-        root.appendChild(toggle);
-        const panel = document.createElement("div");
-        panel.className = "panel";
-        panel.hidden = true;
-        const messages = document.createElement("div");
-        messages.className = "messages";
-        panel.appendChild(messages);
-        const form = document.createElement("form");
-        const input = document.createElement("input");
-        input.type = "text";
+        toggle.setAttribute("aria-expanded", "false");
+        toggle.setAttribute("aria-controls", "panel");
+        toggle.innerHTML = CHAT_ICON;
+        const label = element("span");
+        label.textContent = this.#text.toggleLabel;
+        toggle.appendChild(label);
+        toggle.addEventListener("click", () => this.#setOpen(true));
+        this.#toggleEl = toggle;
+        return toggle;
+    }
+    #buildPanel() {
+        const heading = this.getAttribute("heading") ?? this.#text.headingText;
+        const panel = element("section", "panel");
+        panel.id = "panel";
+        panel.setAttribute("role", "dialog");
+        panel.setAttribute("aria-label", heading);
+        panel.setAttribute("aria-hidden", "true");
+        panel.inert = true;
+        panel.addEventListener("keydown", (event) => {
+            if (event.key === "Escape")
+                this.#setOpen(false);
+        });
+        const header = element("header", "header");
+        const titles = element("div", "titles");
+        const headingEl = element("div", "heading");
+        headingEl.textContent = heading;
+        const subheading = element("div", "subheading");
+        subheading.textContent = this.#text.subheadingText;
+        titles.append(headingEl, subheading);
+        const close = element("button", "close");
+        close.type = "button";
+        close.setAttribute("aria-label", this.#text.closeLabel);
+        close.innerHTML = CLOSE_ICON;
+        close.addEventListener("click", () => this.#setOpen(false));
+        header.append(titles, close);
+        const messages = element("div", "messages");
+        messages.setAttribute("aria-live", "polite");
+        const greeting = this.getAttribute("greeting") ?? this.#text.greetingText;
+        if (greeting.trim()) {
+            const greetingEl = element("div", "greeting");
+            greetingEl.textContent = greeting;
+            messages.appendChild(greetingEl);
+        }
+        const suggestions = this.#buildSuggestions();
+        if (suggestions)
+            messages.appendChild(suggestions);
+        panel.append(header, messages, this.#buildForm());
+        this.#panelEl = panel;
+        this.#closeEl = close;
+        this.#messagesEl = messages;
+        return panel;
+    }
+    #buildSuggestions() {
+        const attr = this.getAttribute("suggestions");
+        const items = (attr === null ? this.#text.suggestions : attr.split("|"))
+            .map((item) => item.trim())
+            .filter((item) => item.length > 0);
+        if (items.length === 0)
+            return undefined;
+        const list = element("div", "suggestions");
+        for (const item of items) {
+            const button = element("button");
+            button.type = "button";
+            button.textContent = item;
+            button.addEventListener("click", () => void this.#sendMessage(item));
+            list.appendChild(button);
+        }
+        this.#suggestionsEl = list;
+        return list;
+    }
+    #buildForm() {
+        const form = element("form");
+        const field = element("div", "field");
+        const input = element("textarea");
+        input.rows = 1;
         input.placeholder = this.#text.inputPlaceholder;
-        input.autocomplete = "off";
-        const submit = document.createElement("button");
-        submit.type = "submit";
-        submit.textContent = this.#text.submitLabel;
-        form.appendChild(input);
-        form.appendChild(submit);
+        input.setAttribute("aria-label", this.#text.inputPlaceholder);
+        input.setAttribute("enterkeyhint", "send");
+        input.addEventListener("input", () => this.#syncInput());
+        input.addEventListener("keydown", (event) => {
+            if (event.key !== "Enter" || event.shiftKey || event.isComposing)
+                return;
+            event.preventDefault();
+            form.requestSubmit();
+        });
+        const send = element("button", "send");
+        send.type = "submit";
+        send.disabled = true;
+        send.setAttribute("aria-label", this.#text.submitLabel);
+        send.innerHTML = SEND_ICON;
+        field.append(input, send);
+        form.append(field, this.#buildDisclosure());
         form.addEventListener("submit", (event) => {
             event.preventDefault();
             const text = input.value;
             input.value = "";
+            this.#syncInput();
             void this.#sendMessage(text);
         });
-        panel.appendChild(form);
-        root.appendChild(panel);
-        this.#panelEl = panel;
-        this.#messagesEl = messages;
         this.#inputEl = input;
+        this.#sendEl = send;
+        return form;
     }
-    #togglePanel() {
-        this.#open = !this.#open;
-        if (!this.#panelEl)
-            return;
-        this.#panelEl.hidden = !this.#open;
-        if (this.#open && !this.#hasShownDisclosure) {
-            this.#hasShownDisclosure = true;
-            this.#renderDisclosure();
-        }
-        if (this.#open) {
-            this.#inputEl?.focus();
-        }
-    }
-    #renderDisclosure() {
-        if (!this.#messagesEl)
-            return;
-        const disclosure = document.createElement("div");
-        disclosure.className = "disclosure";
-        disclosure.append(`${this.#text.disclosureText} `);
+    #buildDisclosure() {
+        const disclosure = element("p", "disclosure");
+        disclosure.append(this.#text.disclosureText);
         const policyHref = this.getAttribute("policy-href");
         if (policyHref) {
-            const link = document.createElement("a");
+            disclosure.append(" ");
+            const link = element("a");
             link.href = policyHref;
             link.target = "_blank";
             link.rel = "noopener noreferrer";
             link.textContent = this.#text.policyLinkText;
             disclosure.appendChild(link);
         }
-        this.#messagesEl.appendChild(disclosure);
+        return disclosure;
+    }
+    #setOpen(open) {
+        if (this.#open === open || !this.#rootEl || !this.#panelEl || !this.#toggleEl)
+            return;
+        this.#open = open;
+        this.#rootEl.classList.toggle("open", open);
+        this.#toggleEl.setAttribute("aria-expanded", String(open));
+        this.#toggleEl.inert = open;
+        this.#panelEl.setAttribute("aria-hidden", String(!open));
+        this.#panelEl.inert = !open;
+        this.#watchViewport(open);
+        this.#lockScroll(open && matches(COMPACT_QUERY));
+        if (open) {
+            // タッチ端末で開いた瞬間にキーボードを出すと、パネルの登場とキーボードの動きが重なる
+            if (matches(FINE_POINTER_QUERY))
+                this.#inputEl?.focus();
+            else
+                this.#closeEl?.focus({ preventScroll: true });
+        }
+        else {
+            this.#inputEl?.blur();
+            this.#toggleEl.focus({ preventScroll: true });
+        }
+    }
+    #watchViewport(on) {
+        const viewport = window.visualViewport;
+        if (!viewport)
+            return;
+        if (on) {
+            viewport.addEventListener("resize", this.#onViewportChange);
+            viewport.addEventListener("scroll", this.#onViewportChange);
+            this.#syncViewport();
+        }
+        else {
+            viewport.removeEventListener("resize", this.#onViewportChange);
+            viewport.removeEventListener("scroll", this.#onViewportChange);
+        }
+    }
+    #syncViewport() {
+        const viewport = window.visualViewport;
+        if (!viewport || !this.#panelEl)
+            return;
+        this.#panelEl.style.setProperty("--vv-height", `${viewport.height}px`);
+        this.#panelEl.style.setProperty("--vv-top", `${viewport.offsetTop}px`);
+        this.#scrollToEnd();
+    }
+    // 全画面表示中に背後のページがスクロールすると、iOS でパネルごと画面外へずれる
+    #lockScroll(lock) {
+        if (lock === this.#scrollLocked)
+            return;
+        const rootStyle = document.documentElement.style;
+        if (lock) {
+            this.#previousOverflow = rootStyle.overflow;
+            rootStyle.overflow = "hidden";
+        }
+        else {
+            rootStyle.overflow = this.#previousOverflow;
+        }
+        this.#scrollLocked = lock;
+    }
+    #syncInput() {
+        const input = this.#inputEl;
+        if (!input || !this.#sendEl)
+            return;
+        input.style.height = "auto";
+        input.style.height = `${input.scrollHeight}px`;
+        this.#sendEl.disabled = this.#pending || input.value.trim().length === 0;
+    }
+    #setPending(pending) {
+        this.#pending = pending;
+        this.#syncInput();
+        if (pending && this.#messagesEl) {
+            const typing = element("div", "typing");
+            typing.setAttribute("role", "status");
+            typing.setAttribute("aria-label", this.#text.typingLabel);
+            typing.append(element("span"), element("span"), element("span"));
+            this.#messagesEl.appendChild(typing);
+            this.#typingEl = typing;
+            this.#scrollToEnd();
+        }
+        else {
+            this.#typingEl?.remove();
+            this.#typingEl = undefined;
+        }
     }
     async #sendMessage(rawText) {
         const text = rawText.trim();
-        if (!text)
+        if (!text || this.#pending)
             return;
+        this.#suggestionsEl?.remove();
+        this.#suggestionsEl = undefined;
         this.#appendMessage({ role: "user", text });
         const endpoint = this.getAttribute("endpoint");
         if (!endpoint) {
             this.#appendMessage({ role: "assistant", text: this.#text.configErrorText });
             return;
         }
+        this.#setPending(true);
+        let answer;
         try {
             const response = await fetch(endpoint, {
                 method: "POST",
@@ -121,27 +311,26 @@ export class FolioAgentWidgetElement extends HTMLElement {
                 body: JSON.stringify({ message: text }),
             });
             const body = (await response.json());
-            this.#appendMessage({
-                role: "assistant",
-                text: body.answer ?? this.#text.answerFallbackText,
-            });
+            answer = body.answer ?? this.#text.answerFallbackText;
         }
         catch {
-            this.#appendMessage({
-                role: "assistant",
-                text: this.#text.networkErrorText,
-            });
+            answer = this.#text.networkErrorText;
         }
+        this.#setPending(false);
+        this.#appendMessage({ role: "assistant", text: answer });
     }
     #appendMessage(message) {
         this.#messages.push(message);
         if (!this.#messagesEl)
             return;
-        const el = document.createElement("div");
-        el.className = `message ${message.role}`;
+        const el = element("div", `message ${message.role}`);
         el.textContent = message.text;
         this.#messagesEl.appendChild(el);
-        this.#messagesEl.scrollTop = this.#messagesEl.scrollHeight;
+        this.#scrollToEnd();
+    }
+    #scrollToEnd() {
+        if (this.#messagesEl)
+            this.#messagesEl.scrollTop = this.#messagesEl.scrollHeight;
     }
 }
 export function defineFolioAgentWidget(tagName = FolioAgentWidgetElement.tagName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio-agent/widget",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Framework-agnostic reception chat widget (silent until clicked)",
   "license": "MIT",
   "type": "module",
@@ -32,6 +32,6 @@
     "prepublishOnly": "tsc -b --force"
   },
   "devDependencies": {
-    "happy-dom": "^20.10.6"
+    "happy-dom": "^20.14.0"
   }
 }