@folio-agent/widget 0.2.0 → 0.3.0

package/README.md

@@ -19,3 +19,5 @@ npm install @folio-agent/widget
 ```
 
 配色・フォントは CSS カスタムプロパティ6トークン（`--folio-agent-surface` / `text` / `muted` / `accent` / `accent-contrast` / `font`）で上書きできる。未指定時は既定デザインのまま動く。
+
+UI 文言は `lang="en"` 属性で英語に切り替えられる（未指定は日本語）。

package/dist/styles.d.ts

@@ -1 +1 @@
-export declare const WIDGET_STYLES = "\n  :host {\n    all: initial;\n    font-family: var(--folio-agent-font, system-ui, sans-serif);\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, #1f2937);\n    color: var(--folio-agent-accent-contrast, #fff);\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, #fff);\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: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: var(--folio-agent-text, #111827);\n  }\n  .message.assistant {\n    align-self: flex-start;\n    background: var(--folio-agent-muted, #f3f4f6);\n    border-radius: 8px;\n    padding: 6px 10px;\n  }\n  .message.user {\n    align-self: flex-end;\n    background: var(--folio-agent-accent, #1f2937);\n    color: var(--folio-agent-accent-contrast, #fff);\n    border-radius: 8px;\n    padding: 6px 10px;\n  }\n  .disclosure {\n    font-size: 12px;\n    color: var(--folio-agent-muted, #6b7280);\n    padding: 0 0 4px;\n  }\n  .disclosure a {\n    color: #2563eb;\n  }\n  form {\n    display: flex;\n    border-top: 1px solid #e5e7eb;\n  }\n  input {\n    flex: 1;\n    border: none;\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, #1f2937);\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  .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";

package/dist/styles.js

@@ -1,11 +1,14 @@
 // テーマ注入: 利用側サイトのグローバルCSSで
 //   folio-agent-widget { --folio-agent-accent: #...; }
 // のようにカスタムプロパティを指定するとShadow DOM内に継承されテーマが反映される。
-// 未指定の場合は各プロパティのフォールバック値（現行デザイン）がそのまま使われる。
+// 未指定の場合は各プロパティがホスト配色（CSSシステムカラー）から導出した値を使い、
+// サイトのライト/ダークいずれの配色にも自動で馴染む。
 export const WIDGET_STYLES = `
   :host {
     all: initial;
-    font-family: var(--folio-agent-font, system-ui, sans-serif);
+    color: inherit;
+    color-scheme: inherit;
+    font-family: var(--folio-agent-font, inherit);
   }
   .toggle {
     position: fixed;
@@ -15,8 +18,8 @@ export const WIDGET_STYLES = `
     height: 56px;
     border-radius: 50%;
     border: none;
-    background: var(--folio-agent-accent, #1f2937);
-    color: var(--folio-agent-accent-contrast, #fff);
+    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);
@@ -30,7 +33,7 @@ export const WIDGET_STYLES = `
     max-height: 420px;
     display: flex;
     flex-direction: column;
-    background: var(--folio-agent-surface, #fff);
+    background: var(--folio-agent-surface, Canvas);
     border-radius: 12px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     overflow: hidden;
@@ -42,30 +45,34 @@ export const WIDGET_STYLES = `
   .messages {
     flex: 1;
     overflow-y: auto;
-    padding: 12px;
+    padding: 16px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
     font-size: 14px;
-    line-height: 1.5;
-    color: var(--folio-agent-text, #111827);
+    line-height: 1.6;
+    color: var(--folio-agent-text, CanvasText);
+  }
+  .message {
+    white-space: pre-wrap;
   }
   .message.assistant {
     align-self: flex-start;
-    background: var(--folio-agent-muted, #f3f4f6);
+    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: 6px 10px;
+    padding: 10px 14px;
   }
   .message.user {
     align-self: flex-end;
-    background: var(--folio-agent-accent, #1f2937);
-    color: var(--folio-agent-accent-contrast, #fff);
+    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: 6px 10px;
+    padding: 10px 14px;
   }
   .disclosure {
     font-size: 12px;
-    color: var(--folio-agent-muted, #6b7280);
+    color: var(--folio-agent-muted, color-mix(in srgb, CanvasText 55%, Canvas));
     padding: 0 0 4px;
   }
   .disclosure a {
@@ -73,11 +80,13 @@ export const WIDGET_STYLES = `
   }
   form {
     display: flex;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid color-mix(in srgb, CanvasText 16%, Canvas);
   }
   input {
     flex: 1;
     border: none;
+    background: transparent;
+    color: inherit;
     padding: 10px;
     font-size: 14px;
   }
@@ -89,7 +98,7 @@ export const WIDGET_STYLES = `
     background: none;
     padding: 0 14px;
     cursor: pointer;
-    color: var(--folio-agent-accent, #1f2937);
+    color: var(--folio-agent-accent, CanvasText);
     font-weight: 600;
   }
 `;

package/dist/widget-element.js

@@ -1,5 +1,29 @@
 import { WIDGET_STYLES } from "./styles.js";
-const DISCLOSURE_TEXT = "入力内容は品質改善のため記録されます。";
+const WIDGET_TEXT = {
+    ja: {
+        toggleAriaLabel: "チャットを開く",
+        inputPlaceholder: "メッセージを入力",
+        submitLabel: "送信",
+        disclosureText: "入力内容は品質改善のため記録されます。",
+        policyLinkText: "利用データの扱いについて",
+        configErrorText: "設定エラー: endpoint属性が指定されていません。",
+        answerFallbackText: "回答を取得できませんでした。しばらくしてから再度お試しください。",
+        networkErrorText: "通信エラーが発生しました。しばらくしてから再度お試しください。",
+    },
+    en: {
+        toggleAriaLabel: "Open chat",
+        inputPlaceholder: "Type a message",
+        submitLabel: "Send",
+        disclosureText: "Your input is logged for quality improvement.",
+        policyLinkText: "About data usage",
+        configErrorText: "Configuration error: the endpoint attribute is not set.",
+        answerFallbackText: "Couldn't get an answer. Please try again later.",
+        networkErrorText: "A network error occurred. Please try again later.",
+    },
+};
+function resolveLanguage(value) {
+    return value === "en" ? "en" : "ja";
+}
 export class FolioAgentWidgetElement extends HTMLElement {
     static tagName = "folio-agent-widget";
     #open = false;
@@ -8,7 +32,9 @@ export class FolioAgentWidgetElement extends HTMLElement {
     #panelEl;
     #messagesEl;
     #inputEl;
+    #text = WIDGET_TEXT.ja;
     connectedCallback() {
+        this.#text = WIDGET_TEXT[resolveLanguage(this.getAttribute("lang"))];
         const root = this.attachShadow({ mode: "open" });
         const style = document.createElement("style");
         style.textContent = WIDGET_STYLES;
@@ -16,7 +42,7 @@ export class FolioAgentWidgetElement extends HTMLElement {
         const toggle = document.createElement("button");
         toggle.className = "toggle";
         toggle.type = "button";
-        toggle.setAttribute("aria-label", "チャットを開く");
+        toggle.setAttribute("aria-label", this.#text.toggleAriaLabel);
         toggle.textContent = "💬";
         toggle.addEventListener("click", () => this.#togglePanel());
         root.appendChild(toggle);
@@ -29,11 +55,11 @@ export class FolioAgentWidgetElement extends HTMLElement {
         const form = document.createElement("form");
         const input = document.createElement("input");
         input.type = "text";
-        input.placeholder = "メッセージを入力";
+        input.placeholder = this.#text.inputPlaceholder;
         input.autocomplete = "off";
         const submit = document.createElement("button");
         submit.type = "submit";
-        submit.textContent = "送信";
+        submit.textContent = this.#text.submitLabel;
         form.appendChild(input);
         form.appendChild(submit);
         form.addEventListener("submit", (event) => {
@@ -66,14 +92,14 @@ export class FolioAgentWidgetElement extends HTMLElement {
             return;
         const disclosure = document.createElement("div");
         disclosure.className = "disclosure";
-        disclosure.append(`${DISCLOSURE_TEXT} `);
+        disclosure.append(`${this.#text.disclosureText} `);
         const policyHref = this.getAttribute("policy-href");
         if (policyHref) {
             const link = document.createElement("a");
             link.href = policyHref;
             link.target = "_blank";
             link.rel = "noopener noreferrer";
-            link.textContent = "利用データの扱いについて";
+            link.textContent = this.#text.policyLinkText;
             disclosure.appendChild(link);
         }
         this.#messagesEl.appendChild(disclosure);
@@ -85,7 +111,7 @@ export class FolioAgentWidgetElement extends HTMLElement {
         this.#appendMessage({ role: "user", text });
         const endpoint = this.getAttribute("endpoint");
         if (!endpoint) {
-            this.#appendMessage({ role: "assistant", text: "設定エラー: endpoint属性が指定されていません。" });
+            this.#appendMessage({ role: "assistant", text: this.#text.configErrorText });
             return;
         }
         try {
@@ -97,13 +123,13 @@ export class FolioAgentWidgetElement extends HTMLElement {
             const body = (await response.json());
             this.#appendMessage({
                 role: "assistant",
-                text: body.answer ?? "回答を取得できませんでした。しばらくしてから再度お試しください。",
+                text: body.answer ?? this.#text.answerFallbackText,
             });
         }
         catch {
             this.#appendMessage({
                 role: "assistant",
-                text: "通信エラーが発生しました。しばらくしてから再度お試しください。",
+                text: this.#text.networkErrorText,
             });
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio-agent/widget",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Framework-agnostic reception chat widget (silent until clicked)",
   "license": "MIT",
   "type": "module",
@@ -28,7 +28,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -b"
+    "build": "tsc -b",
+    "prepublishOnly": "tsc -b --force"
   },
   "devDependencies": {
     "happy-dom": "^20.10.6"