canvu-react 0.3.5

package/dist/chatbot.js

@@ -0,0 +1,218 @@
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import { useId, useMemo, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/react/plugins/chatbot/message-text.ts
+function getMessageText(message) {
+  const parts = message.parts;
+  if (!parts?.length) return "";
+  return parts.filter((p) => p.type === "text").map((p) => p.text).join("");
+}
+var shell = {
+  position: "absolute",
+  right: 12,
+  bottom: 12,
+  width: 360,
+  maxWidth: "calc(100% - 24px)",
+  maxHeight: "min(420px, 70dvh)",
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: 12,
+  border: "1px solid rgba(0,0,0,0.12)",
+  background: "rgba(255,255,255,0.97)",
+  boxShadow: "0 8px 24px rgba(0,0,0,0.1)",
+  pointerEvents: "auto",
+  overflow: "hidden"
+};
+var header = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "8px 12px",
+  borderBottom: "1px solid #e4e4e7",
+  fontSize: "0.8125rem",
+  fontWeight: 700,
+  color: "#18181b"
+};
+var messagesBox = {
+  flex: 1,
+  minHeight: 0,
+  overflowY: "auto",
+  padding: "10px 12px",
+  fontSize: "0.8125rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+var bubble = (role) => ({
+  alignSelf: role === "user" ? "flex-end" : "flex-start",
+  maxWidth: "92%",
+  padding: "8px 10px",
+  borderRadius: 10,
+  background: role === "user" ? "#2563eb" : "#f4f4f5",
+  color: role === "user" ? "#fff" : "#18181b",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word"
+});
+var formStyle = {
+  display: "flex",
+  gap: 8,
+  padding: 8,
+  borderTop: "1px solid #e4e4e7"
+};
+var inputStyle = {
+  flex: 1,
+  minWidth: 0,
+  padding: "8px 10px",
+  borderRadius: 8,
+  border: "1px solid #d4d4d8",
+  fontSize: "0.8125rem",
+  outline: "none"
+};
+var btn = {
+  padding: "8px 12px",
+  borderRadius: 8,
+  border: "none",
+  background: "#18181b",
+  color: "#fff",
+  fontSize: "0.8125rem",
+  fontWeight: 600,
+  cursor: "pointer"
+};
+function ChatbotPluginPanel({
+  chatApi,
+  title = "Assistente"
+}) {
+  const reactId = useId();
+  const chatId = useMemo(
+    () => `trazo-chatbot-${reactId.replace(/[^a-zA-Z0-9_-]/g, "_")}`,
+    [reactId]
+  );
+  const transport = useMemo(
+    () => new DefaultChatTransport({ api: chatApi }),
+    [chatApi]
+  );
+  const { messages, sendMessage, status, error, stop } = useChat({
+    id: chatId,
+    transport
+  });
+  const [input, setInput] = useState("");
+  const [open, setOpen] = useState(true);
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const t = input.trim();
+    if (!t || status === "streaming" || status === "submitted") return;
+    void sendMessage({ text: t });
+    setInput("");
+  };
+  if (!open) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        style: {
+          ...btn,
+          position: "absolute",
+          right: 12,
+          bottom: 12,
+          pointerEvents: "auto",
+          borderRadius: 999,
+          padding: "10px 14px"
+        },
+        onClick: () => setOpen(true),
+        children: "Chat"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("aside", { style: shell, "aria-label": title, children: [
+    /* @__PURE__ */ jsxs("div", { style: header, children: [
+      /* @__PURE__ */ jsx("span", { children: title }),
+      /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+        (status === "streaming" || status === "submitted") && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void stop(),
+            style: {
+              fontSize: "0.75rem",
+              color: "#71717a",
+              background: "none",
+              border: "none",
+              cursor: "pointer"
+            },
+            children: "Parar"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen(false),
+            style: {
+              fontSize: "0.75rem",
+              color: "#71717a",
+              background: "none",
+              border: "none",
+              cursor: "pointer"
+            },
+            "aria-label": "Fechar chat",
+            children: "\u2212"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: messagesBox, children: [
+      messages.length === 0 && /* @__PURE__ */ jsxs("p", { style: { margin: 0, color: "#71717a", fontSize: "0.75rem" }, children: [
+        "Mensagens aparecem aqui. O backend deve estar em",
+        " ",
+        /* @__PURE__ */ jsx("code", { style: { fontSize: "0.7rem" }, children: chatApi }),
+        "."
+      ] }),
+      messages.map((m) => /* @__PURE__ */ jsx("div", { style: bubble(m.role), children: getMessageText(m) }, m.id)),
+      error && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...bubble("assistant"),
+            background: "#fef2f2",
+            color: "#b91c1c"
+          },
+          children: error.message
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("form", { style: formStyle, onSubmit, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          style: inputStyle,
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          placeholder: "Escreva uma mensagem\u2026",
+          "aria-label": "Mensagem",
+          autoComplete: "off"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          style: btn,
+          disabled: status === "streaming" || status === "submitted",
+          children: "Enviar"
+        }
+      )
+    ] })
+  ] });
+}
+function chatbotPlugin(options) {
+  return {
+    id: "trazo.plugin.chatbot",
+    render: () => /* @__PURE__ */ jsx(ChatbotPluginPanel, { ...options })
+  };
+}
+
+export { ChatbotPluginPanel, chatbotPlugin };
+//# sourceMappingURL=chatbot.js.map
+//# sourceMappingURL=chatbot.js.map

package/dist/chatbot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/plugins/chatbot/message-text.ts","../src/react/plugins/chatbot/ChatbotPluginPanel.tsx","../src/react/plugins/chatbot/chatbot-plugin.tsx"],"names":["jsx"],"mappings":"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","file":"chatbot.js","sourcesContent":["import type { UIMessage } from \"ai\";\n\n/** Flattens text parts from a UI message for simple transcript rendering. */\nexport function getMessageText(message: UIMessage): string {\n\tconst parts = message.parts;\n\tif (!parts?.length) return \"\";\n\treturn parts\n\t\t.filter((p): p is { type: \"text\"; text: string } => p.type === \"text\")\n\t\t.map((p) => p.text)\n\t\t.join(\"\");\n}\n","\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport { DefaultChatTransport } from \"ai\";\nimport { type CSSProperties, type FormEvent, useId, useMemo, useState } from \"react\";\nimport { getMessageText } from \"./message-text\";\n\nconst shell: CSSProperties = {\n\tposition: \"absolute\",\n\tright: 12,\n\tbottom: 12,\n\twidth: 360,\n\tmaxWidth: \"calc(100% - 24px)\",\n\tmaxHeight: \"min(420px, 70dvh)\",\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tborderRadius: 12,\n\tborder: \"1px solid rgba(0,0,0,0.12)\",\n\tbackground: \"rgba(255,255,255,0.97)\",\n\tboxShadow: \"0 8px 24px rgba(0,0,0,0.1)\",\n\tpointerEvents: \"auto\",\n\toverflow: \"hidden\",\n};\n\nconst header: CSSProperties = {\n\tdisplay: \"flex\",\n\talignItems: \"center\",\n\tjustifyContent: \"space-between\",\n\tpadding: \"8px 12px\",\n\tborderBottom: \"1px solid #e4e4e7\",\n\tfontSize: \"0.8125rem\",\n\tfontWeight: 700,\n\tcolor: \"#18181b\",\n};\n\nconst messagesBox: CSSProperties = {\n\tflex: 1,\n\tminHeight: 0,\n\toverflowY: \"auto\",\n\tpadding: \"10px 12px\",\n\tfontSize: \"0.8125rem\",\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tgap: 8,\n};\n\nconst bubble = (role: string): CSSProperties => ({\n\talignSelf: role === \"user\" ? \"flex-end\" : \"flex-start\",\n\tmaxWidth: \"92%\",\n\tpadding: \"8px 10px\",\n\tborderRadius: 10,\n\tbackground: role === \"user\" ? \"#2563eb\" : \"#f4f4f5\",\n\tcolor: role === \"user\" ? \"#fff\" : \"#18181b\",\n\twhiteSpace: \"pre-wrap\",\n\twordBreak: \"break-word\",\n});\n\nconst formStyle: CSSProperties = {\n\tdisplay: \"flex\",\n\tgap: 8,\n\tpadding: 8,\n\tborderTop: \"1px solid #e4e4e7\",\n};\n\nconst inputStyle: CSSProperties = {\n\tflex: 1,\n\tminWidth: 0,\n\tpadding: \"8px 10px\",\n\tborderRadius: 8,\n\tborder: \"1px solid #d4d4d8\",\n\tfontSize: \"0.8125rem\",\n\toutline: \"none\",\n};\n\nconst btn: CSSProperties = {\n\tpadding: \"8px 12px\",\n\tborderRadius: 8,\n\tborder: \"none\",\n\tbackground: \"#18181b\",\n\tcolor: \"#fff\",\n\tfontSize: \"0.8125rem\",\n\tfontWeight: 600,\n\tcursor: \"pointer\",\n};\n\nexport type ChatbotPluginPanelProps = {\n\t/**\n\t * Chat completions endpoint (your Next route, Express, or external URL).\n\t * Must implement the [AI SDK UI stream protocol](https://ai-sdk.dev/docs/ai-sdk-ui/chatbot).\n\t */\n\tchatApi: string;\n\ttitle?: string;\n};\n\n/**\n * Floating chat panel powered by `useChat` + {@link DefaultChatTransport}.\n */\nexport function ChatbotPluginPanel({\n\tchatApi,\n\ttitle = \"Assistente\",\n}: ChatbotPluginPanelProps) {\n\tconst reactId = useId();\n\t/** Stable across SSR + hydration; `useChat` otherwise generates a random id per environment. */\n\tconst chatId = useMemo(\n\t\t() => `trazo-chatbot-${reactId.replace(/[^a-zA-Z0-9_-]/g, \"_\")}`,\n\t\t[reactId],\n\t);\n\n\tconst transport = useMemo(\n\t\t() => new DefaultChatTransport({ api: chatApi }),\n\t\t[chatApi],\n\t);\n\n\tconst { messages, sendMessage, status, error, stop } = useChat({\n\t\tid: chatId,\n\t\ttransport,\n\t});\n\n\tconst [input, setInput] = useState(\"\");\n\tconst [open, setOpen] = useState(true);\n\n\tconst onSubmit = (e: FormEvent) => {\n\t\te.preventDefault();\n\t\tconst t = input.trim();\n\t\tif (!t || status === \"streaming\" || status === \"submitted\") return;\n\t\tvoid sendMessage({ text: t });\n\t\tsetInput(\"\");\n\t};\n\n\tif (!open) {\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tstyle={{\n\t\t\t\t\t...btn,\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tright: 12,\n\t\t\t\t\tbottom: 12,\n\t\t\t\t\tpointerEvents: \"auto\",\n\t\t\t\t\tborderRadius: 999,\n\t\t\t\t\tpadding: \"10px 14px\",\n\t\t\t\t}}\n\t\t\t\tonClick={() => setOpen(true)}\n\t\t\t>\n\t\t\t\tChat\n\t\t\t</button>\n\t\t);\n\t}\n\n\treturn (\n\t\t<aside style={shell} aria-label={title}>\n\t\t\t<div style={header}>\n\t\t\t\t<span>{title}</span>\n\t\t\t\t<span style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\n\t\t\t\t\t{(status === \"streaming\" || status === \"submitted\") && (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => void stop()}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfontSize: \"0.75rem\",\n\t\t\t\t\t\t\t\tcolor: \"#71717a\",\n\t\t\t\t\t\t\t\tbackground: \"none\",\n\t\t\t\t\t\t\t\tborder: \"none\",\n\t\t\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tParar\n\t\t\t\t\t\t</button>\n\t\t\t\t\t)}\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={() => setOpen(false)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tfontSize: \"0.75rem\",\n\t\t\t\t\t\t\tcolor: \"#71717a\",\n\t\t\t\t\t\t\tbackground: \"none\",\n\t\t\t\t\t\t\tborder: \"none\",\n\t\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-label=\"Fechar chat\"\n\t\t\t\t\t>\n\t\t\t\t\t\t−\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div style={messagesBox}>\n\t\t\t\t{messages.length === 0 && (\n\t\t\t\t\t<p style={{ margin: 0, color: \"#71717a\", fontSize: \"0.75rem\" }}>\n\t\t\t\t\t\tMensagens aparecem aqui. O backend deve estar em{\" \"}\n\t\t\t\t\t\t<code style={{ fontSize: \"0.7rem\" }}>{chatApi}</code>.\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{messages.map((m) => (\n\t\t\t\t\t<div key={m.id} style={bubble(m.role)}>\n\t\t\t\t\t\t{getMessageText(m)}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t{error && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...bubble(\"assistant\"),\n\t\t\t\t\t\t\tbackground: \"#fef2f2\",\n\t\t\t\t\t\t\tcolor: \"#b91c1c\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{error.message}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<form style={formStyle} onSubmit={onSubmit}>\n\t\t\t\t<input\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t\tvalue={input}\n\t\t\t\t\tonChange={(e) => setInput(e.target.value)}\n\t\t\t\t\tplaceholder=\"Escreva uma mensagem…\"\n\t\t\t\t\taria-label=\"Mensagem\"\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\tstyle={btn}\n\t\t\t\t\tdisabled={status === \"streaming\" || status === \"submitted\"}\n\t\t\t\t>\n\t\t\t\t\tEnviar\n\t\t\t\t</button>\n\t\t\t</form>\n\t\t</aside>\n\t);\n}\n","import type { CanvasPlugin } from \"../types\";\nimport {\n\tChatbotPluginPanel,\n\ttype ChatbotPluginPanelProps,\n} from \"./ChatbotPluginPanel\";\n\nexport type ChatbotPluginOptions = ChatbotPluginPanelProps;\n\n/**\n * First-party plugin: floating chat UI using the Vercel AI SDK (`useChat` + HTTP transport).\n * You **must** host a compatible POST endpoint at `chatApi` (see AI SDK UI chat protocol).\n *\n * @example\n * ```tsx\n * <VectorViewport\n *   items={doc.items}\n *   onItemsChange={doc.onItemsChange}\n *   plugins={[chatbotPlugin({ chatApi: \"/api/chat\" })]}\n * />\n * ```\n */\nexport function chatbotPlugin(options: ChatbotPluginOptions): CanvasPlugin {\n\treturn {\n\t\tid: \"trazo.plugin.chatbot\",\n\t\trender: () => <ChatbotPluginPanel {...options} />,\n\t};\n}\n"]}