@folio-agent/widget 0.1.0

package/README.md

@@ -0,0 +1,21 @@
+# @folio-agent/widget
+
+ポートフォリオ受付チャットボットのフロントエンド Web Component。クリックされるまで沈黙し、フレームワーク非依存（Shadow DOM）で導入先の CSS と衝突しない。
+
+`@folio-agent/handler` とセットで使う。詳細（アーキテクチャ・設計判断・利用手順全体）はリポジトリの [README](https://github.com/yktsnet/folio-agent#readme) を参照。
+
+## Usage
+
+```bash
+npm install @folio-agent/widget
+```
+
+```html
+<folio-agent-widget endpoint="/api/chat" policy-href="/data-policy"></folio-agent-widget>
+<script type="module">
+  import { defineFolioAgentWidget } from "@folio-agent/widget";
+  defineFolioAgentWidget();
+</script>
+```
+
+配色・フォントは CSS カスタムプロパティ6トークン（`--folio-agent-surface` / `text` / `muted` / `accent` / `accent-contrast` / `font`）で上書きできる。未指定時は既定デザインのまま動く。

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { FolioAgentWidgetElement, defineFolioAgentWidget } from "./widget-element.js";
+export type { ChatMessage, ChatResponseBody } from "./types.js";

package/dist/index.js

@@ -0,0 +1 @@
+export { FolioAgentWidgetElement, defineFolioAgentWidget } from "./widget-element.js";

package/dist/styles.d.ts

@@ -0,0 +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";

package/dist/styles.js

@@ -0,0 +1,95 @@
+// テーマ注入: 利用側サイトのグローバルCSSで
+//   folio-agent-widget { --folio-agent-accent: #...; }
+// のようにカスタムプロパティを指定するとShadow DOM内に継承されテーマが反映される。
+// 未指定の場合は各プロパティのフォールバック値（現行デザイン）がそのまま使われる。
+export const WIDGET_STYLES = `
+  :host {
+    all: initial;
+    font-family: var(--folio-agent-font, system-ui, sans-serif);
+  }
+  .toggle {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: none;
+    background: var(--folio-agent-accent, #1f2937);
+    color: var(--folio-agent-accent-contrast, #fff);
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    z-index: 2147483000;
+  }
+  .panel {
+    position: fixed;
+    right: 20px;
+    bottom: 88px;
+    width: 320px;
+    max-height: 420px;
+    display: flex;
+    flex-direction: column;
+    background: var(--folio-agent-surface, #fff);
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    z-index: 2147483000;
+  }
+  .panel[hidden] {
+    display: none;
+  }
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--folio-agent-text, #111827);
+  }
+  .message.assistant {
+    align-self: flex-start;
+    background: var(--folio-agent-muted, #f3f4f6);
+    border-radius: 8px;
+    padding: 6px 10px;
+  }
+  .message.user {
+    align-self: flex-end;
+    background: var(--folio-agent-accent, #1f2937);
+    color: var(--folio-agent-accent-contrast, #fff);
+    border-radius: 8px;
+    padding: 6px 10px;
+  }
+  .disclosure {
+    font-size: 12px;
+    color: var(--folio-agent-muted, #6b7280);
+    padding: 0 0 4px;
+  }
+  .disclosure a {
+    color: #2563eb;
+  }
+  form {
+    display: flex;
+    border-top: 1px solid #e5e7eb;
+  }
+  input {
+    flex: 1;
+    border: none;
+    padding: 10px;
+    font-size: 14px;
+  }
+  input:focus {
+    outline: none;
+  }
+  button[type="submit"] {
+    border: none;
+    background: none;
+    padding: 0 14px;
+    cursor: pointer;
+    color: var(--folio-agent-accent, #1f2937);
+    font-weight: 600;
+  }
+`;

package/dist/types.d.ts

@@ -0,0 +1,8 @@
+export interface ChatMessage {
+    role: "user" | "assistant";
+    text: string;
+}
+export interface ChatResponseBody {
+    answer?: string;
+    route?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/widget-element.d.ts

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

package/dist/widget-element.js

@@ -0,0 +1,125 @@
+import { WIDGET_STYLES } from "./styles.js";
+const DISCLOSURE_TEXT = "入力内容は品質改善のため記録されます。";
+export class FolioAgentWidgetElement extends HTMLElement {
+    static tagName = "folio-agent-widget";
+    #open = false;
+    #hasShownDisclosure = false;
+    #messages = [];
+    #panelEl;
+    #messagesEl;
+    #inputEl;
+    connectedCallback() {
+        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";
+        toggle.type = "button";
+        toggle.setAttribute("aria-label", "チャットを開く");
+        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";
+        input.placeholder = "メッセージを入力";
+        input.autocomplete = "off";
+        const submit = document.createElement("button");
+        submit.type = "submit";
+        submit.textContent = "送信";
+        form.appendChild(input);
+        form.appendChild(submit);
+        form.addEventListener("submit", (event) => {
+            event.preventDefault();
+            const text = input.value;
+            input.value = "";
+            void this.#sendMessage(text);
+        });
+        panel.appendChild(form);
+        root.appendChild(panel);
+        this.#panelEl = panel;
+        this.#messagesEl = messages;
+        this.#inputEl = input;
+    }
+    #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(`${DISCLOSURE_TEXT} `);
+        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 = "利用データの扱いについて";
+            disclosure.appendChild(link);
+        }
+        this.#messagesEl.appendChild(disclosure);
+    }
+    async #sendMessage(rawText) {
+        const text = rawText.trim();
+        if (!text)
+            return;
+        this.#appendMessage({ role: "user", text });
+        const endpoint = this.getAttribute("endpoint");
+        if (!endpoint) {
+            this.#appendMessage({ role: "assistant", text: "設定エラー: endpoint属性が指定されていません。" });
+            return;
+        }
+        try {
+            const response = await fetch(endpoint, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ message: text }),
+            });
+            const body = (await response.json());
+            this.#appendMessage({
+                role: "assistant",
+                text: body.answer ?? "回答を取得できませんでした。しばらくしてから再度お試しください。",
+            });
+        }
+        catch {
+            this.#appendMessage({
+                role: "assistant",
+                text: "通信エラーが発生しました。しばらくしてから再度お試しください。",
+            });
+        }
+    }
+    #appendMessage(message) {
+        this.#messages.push(message);
+        if (!this.#messagesEl)
+            return;
+        const el = document.createElement("div");
+        el.className = `message ${message.role}`;
+        el.textContent = message.text;
+        this.#messagesEl.appendChild(el);
+        this.#messagesEl.scrollTop = this.#messagesEl.scrollHeight;
+    }
+}
+export function defineFolioAgentWidget(tagName = FolioAgentWidgetElement.tagName) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, FolioAgentWidgetElement);
+    }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@folio-agent/widget",
+  "version": "0.1.0",
+  "description": "Framework-agnostic reception chat widget (silent until clicked)",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yktsnet/folio-agent.git",
+    "directory": "packages/widget"
+  },
+  "homepage": "https://github.com/yktsnet/folio-agent#readme",
+  "bugs": {
+    "url": "https://github.com/yktsnet/folio-agent/issues"
+  },
+  "keywords": [
+    "chatbot",
+    "web-components",
+    "chat-widget",
+    "shadow-dom"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b"
+  },
+  "devDependencies": {
+    "happy-dom": "^20.10.6"
+  }
+}