@object-ui/plugin-chatbot 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,63 @@
+# @object-ui/plugin-chatbot
+
+Chatbot interface plugin for Object UI.
+
+## Installation
+
+```bash
+npm install @object-ui/plugin-chatbot
+```
+
+## Usage
+
+```tsx
+import { Chatbot } from '@object-ui/plugin-chatbot';
+
+function App() {
+  const [messages, setMessages] = useState([
+    {
+      id: '1',
+      role: 'assistant',
+      content: 'Hello! How can I help you today?'
+    }
+  ]);
+
+  const handleSend = (content: string) => {
+    const newMessage = {
+      id: Date.now().toString(),
+      role: 'user',
+      content
+    };
+    setMessages([...messages, newMessage]);
+  };
+
+  return (
+    <Chatbot
+      messages={messages}
+      onSendMessage={handleSend}
+      placeholder="Type your message..."
+    />
+  );
+}
+```
+
+## Schema-Driven Usage
+
+This plugin automatically registers with ObjectUI's component registry when imported:
+
+```tsx
+import '@object-ui/plugin-chatbot';
+
+const schema = {
+  component: 'chatbot',
+  messages: [
+    { id: '1', role: 'assistant', content: 'Hello!' }
+  ],
+  placeholder: 'Type your message...',
+  autoResponse: true
+};
+```
+
+## License
+
+MIT © ObjectStack Inc.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,554 @@
+import * as h from "react";
+import oe, { useState as le } from "react";
+import { cn as A, ScrollArea as ie, Input as ue, Button as ce, Avatar as J, AvatarImage as G, AvatarFallback as X } from "@object-ui/components";
+import { Send as de } from "lucide-react";
+import { ComponentRegistry as fe } from "@object-ui/core";
+var O = { exports: {} }, _ = {};
+var H;
+function me() {
+  if (H) return _;
+  H = 1;
+  var a = /* @__PURE__ */ Symbol.for("react.transitional.element"), d = /* @__PURE__ */ Symbol.for("react.fragment");
+  function m(c, o, u) {
+    var s = null;
+    if (u !== void 0 && (s = "" + u), o.key !== void 0 && (s = "" + o.key), "key" in o) {
+      u = {};
+      for (var p in o)
+        p !== "key" && (u[p] = o[p]);
+    } else u = o;
+    return o = u.ref, {
+      $$typeof: a,
+      type: c,
+      key: s,
+      ref: o !== void 0 ? o : null,
+      props: u
+    };
+  }
+  return _.Fragment = d, _.jsx = m, _.jsxs = m, _;
+}
+var w = {};
+var q;
+function pe() {
+  return q || (q = 1, process.env.NODE_ENV !== "production" && (function() {
+    function a(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === re ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case g:
+          return "Fragment";
+        case P:
+          return "Profiler";
+        case S:
+          return "StrictMode";
+        case Q:
+          return "Suspense";
+        case ee:
+          return "SuspenseList";
+        case te:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case E:
+            return "Portal";
+          case Z:
+            return e.displayName || "Context";
+          case f:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case K:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ae:
+            return t = e.displayName || null, t !== null ? t : a(e.type) || "Memo";
+          case C:
+            t = e._payload, e = e._init;
+            try {
+              return a(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function d(e) {
+      return "" + e;
+    }
+    function m(e) {
+      try {
+        d(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var n = t.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          l
+        ), d(e);
+      }
+    }
+    function c(e) {
+      if (e === g) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === C)
+        return "<...>";
+      try {
+        var t = a(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = F.A;
+      return e === null ? null : e.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function s(e) {
+      if (Y.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, t) {
+      function n() {
+        M || (M = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function v() {
+      var e = a(this.type);
+      return $[e] || ($[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function x(e, t, n, l, N, D) {
+      var i = n.ref;
+      return e = {
+        $$typeof: T,
+        type: e,
+        key: t,
+        props: n,
+        _owner: l
+      }, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: v
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: D
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function y(e, t, n, l, N, D) {
+      var i = t.children;
+      if (i !== void 0)
+        if (l)
+          if (se(i)) {
+            for (l = 0; l < i.length; l++)
+              k(i[l]);
+            Object.freeze && Object.freeze(i);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else k(i);
+      if (Y.call(t, "key")) {
+        i = a(e);
+        var R = Object.keys(t).filter(function(ne) {
+          return ne !== "key";
+        });
+        l = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", W[i + l] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          l,
+          i,
+          R,
+          i
+        ), W[i + l] = !0);
+      }
+      if (i = null, n !== void 0 && (m(n), i = "" + n), s(t) && (m(t.key), i = "" + t.key), "key" in t) {
+        n = {};
+        for (var U in t)
+          U !== "key" && (n[U] = t[U]);
+      } else n = t;
+      return i && p(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), x(
+        e,
+        i,
+        n,
+        o(),
+        N,
+        D
+      );
+    }
+    function k(e) {
+      j(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === C && (e._payload.status === "fulfilled" ? j(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function j(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === T;
+    }
+    var b = oe, T = /* @__PURE__ */ Symbol.for("react.transitional.element"), E = /* @__PURE__ */ Symbol.for("react.portal"), g = /* @__PURE__ */ Symbol.for("react.fragment"), S = /* @__PURE__ */ Symbol.for("react.strict_mode"), P = /* @__PURE__ */ Symbol.for("react.profiler"), f = /* @__PURE__ */ Symbol.for("react.consumer"), Z = /* @__PURE__ */ Symbol.for("react.context"), K = /* @__PURE__ */ Symbol.for("react.forward_ref"), Q = /* @__PURE__ */ Symbol.for("react.suspense"), ee = /* @__PURE__ */ Symbol.for("react.suspense_list"), ae = /* @__PURE__ */ Symbol.for("react.memo"), C = /* @__PURE__ */ Symbol.for("react.lazy"), te = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), F = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, se = Array.isArray, I = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    b = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var M, $ = {}, V = b.react_stack_bottom_frame.bind(
+      b,
+      u
+    )(), L = I(c(u)), W = {};
+    w.Fragment = g, w.jsx = function(e, t, n) {
+      var l = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        t,
+        n,
+        !1,
+        l ? Error("react-stack-top-frame") : V,
+        l ? I(c(e)) : L
+      );
+    }, w.jsxs = function(e, t, n) {
+      var l = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        t,
+        n,
+        !0,
+        l ? Error("react-stack-top-frame") : V,
+        l ? I(c(e)) : L
+      );
+    };
+  })()), w;
+}
+var z;
+function be() {
+  return z || (z = 1, process.env.NODE_ENV === "production" ? O.exports = me() : O.exports = pe()), O.exports;
+}
+var r = be();
+fe.register(
+  "chatbot",
+  ({ schema: a, className: d, ...m }) => {
+    const [c, o] = le(
+      a.messages?.map((s, p) => ({
+        id: s.id || `msg-${p}`,
+        role: s.role || "user",
+        content: s.content || "",
+        timestamp: typeof s.timestamp == "string" ? s.timestamp : s.timestamp instanceof Date ? s.timestamp.toISOString() : void 0,
+        avatar: s.avatar,
+        avatarFallback: s.avatarFallback
+      })) || []
+    ), u = (s) => {
+      const p = {
+        id: crypto?.randomUUID?.() || `msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+        role: "user",
+        content: s,
+        timestamp: a.showTimestamp ? (/* @__PURE__ */ new Date()).toLocaleTimeString() : void 0
+      }, v = [...c, p];
+      o(v), a.onSend && a.onSend(s, v), a.autoResponse && setTimeout(() => {
+        const x = {
+          id: crypto?.randomUUID?.() || `msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+          role: "assistant",
+          content: a.autoResponseText || "Thank you for your message!",
+          timestamp: a.showTimestamp ? (/* @__PURE__ */ new Date()).toLocaleTimeString() : void 0
+        };
+        o((y) => [...y, x]);
+      }, a.autoResponseDelay || 1e3);
+    };
+    return /* @__PURE__ */ r.jsx(
+      B,
+      {
+        messages: c,
+        placeholder: a.placeholder,
+        onSendMessage: u,
+        disabled: a.disabled,
+        showTimestamp: a.showTimestamp,
+        userAvatarUrl: a.userAvatarUrl,
+        userAvatarFallback: a.userAvatarFallback,
+        assistantAvatarUrl: a.assistantAvatarUrl,
+        assistantAvatarFallback: a.assistantAvatarFallback,
+        maxHeight: a.maxHeight,
+        className: d,
+        ...m
+      }
+    );
+  },
+  {
+    label: "Chatbot",
+    inputs: [
+      {
+        name: "messages",
+        type: "array",
+        label: "Initial Messages",
+        description: "Array of message objects with id, role, content, and optional timestamp"
+      },
+      {
+        name: "placeholder",
+        type: "string",
+        label: "Input Placeholder",
+        defaultValue: "Type your message..."
+      },
+      {
+        name: "showTimestamp",
+        type: "boolean",
+        label: "Show Timestamps",
+        defaultValue: !1
+      },
+      {
+        name: "disabled",
+        type: "boolean",
+        label: "Disabled",
+        defaultValue: !1
+      },
+      {
+        name: "userAvatarUrl",
+        type: "string",
+        label: "User Avatar URL",
+        description: "URL of the user avatar image"
+      },
+      {
+        name: "userAvatarFallback",
+        type: "string",
+        label: "User Avatar Fallback",
+        defaultValue: "You",
+        description: "Fallback text shown when user avatar image is not available"
+      },
+      {
+        name: "assistantAvatarUrl",
+        type: "string",
+        label: "Assistant Avatar URL",
+        description: "URL of the assistant avatar image"
+      },
+      {
+        name: "assistantAvatarFallback",
+        type: "string",
+        label: "Assistant Avatar Fallback",
+        defaultValue: "AI",
+        description: "Fallback text shown when assistant avatar image is not available"
+      },
+      {
+        name: "maxHeight",
+        type: "string",
+        label: "Max Height",
+        defaultValue: "500px"
+      },
+      {
+        name: "autoResponse",
+        type: "boolean",
+        label: "Enable Auto Response (Demo)",
+        defaultValue: !1,
+        description: "Automatically send a response after user message (for demo purposes)"
+      },
+      {
+        name: "autoResponseText",
+        type: "string",
+        label: "Auto Response Text",
+        defaultValue: "Thank you for your message!"
+      },
+      {
+        name: "autoResponseDelay",
+        type: "number",
+        label: "Auto Response Delay (ms)",
+        defaultValue: 1e3
+      },
+      {
+        name: "className",
+        type: "string",
+        label: "CSS Class"
+      }
+    ],
+    defaultProps: {
+      messages: [
+        {
+          id: "welcome",
+          role: "assistant",
+          content: "Hello! How can I help you today?"
+        }
+      ],
+      placeholder: "Type your message...",
+      showTimestamp: !1,
+      disabled: !1,
+      userAvatarFallback: "You",
+      assistantAvatarFallback: "AI",
+      maxHeight: "500px",
+      autoResponse: !0,
+      autoResponseText: "Thank you for your message! This is an automated response.",
+      autoResponseDelay: 1e3,
+      className: "w-full max-w-2xl"
+    }
+  }
+);
+const B = h.forwardRef(
+  ({
+    className: a,
+    messages: d = [],
+    placeholder: m = "Type your message...",
+    onSendMessage: c,
+    disabled: o = !1,
+    showTimestamp: u = !1,
+    userAvatarUrl: s,
+    userAvatarFallback: p = "You",
+    assistantAvatarUrl: v,
+    assistantAvatarFallback: x = "AI",
+    maxHeight: y = "500px",
+    ...k
+  }, j) => {
+    const [b, T] = h.useState(""), E = h.useRef(null), g = h.useRef(null);
+    h.useEffect(() => {
+      if (E.current) {
+        const f = E.current.querySelector("[data-radix-scroll-area-viewport]");
+        f && (f.scrollTop = f.scrollHeight);
+      }
+    }, [d]);
+    const S = () => {
+      b.trim() && c && (c(b.trim()), T(""), g.current?.focus());
+    }, P = (f) => {
+      f.key === "Enter" && !f.shiftKey && (f.preventDefault(), S());
+    };
+    return /* @__PURE__ */ r.jsxs(
+      "div",
+      {
+        ref: j,
+        className: A(
+          "flex flex-col border rounded-lg bg-background overflow-hidden",
+          a
+        ),
+        style: { maxHeight: y },
+        ...k,
+        children: [
+          /* @__PURE__ */ r.jsx(ie, { ref: E, className: "flex-1 p-4", children: /* @__PURE__ */ r.jsx("div", { className: "space-y-4", children: d.length === 0 ? /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center h-32 text-muted-foreground text-sm", children: "No messages yet. Start a conversation!" }) : d.map((f) => /* @__PURE__ */ r.jsx(
+            ve,
+            {
+              message: f,
+              showTimestamp: u,
+              userAvatarUrl: s,
+              userAvatarFallback: p,
+              assistantAvatarUrl: v,
+              assistantAvatarFallback: x
+            },
+            f.id
+          )) }) }),
+          /* @__PURE__ */ r.jsx("div", { className: "border-t p-4", children: /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ r.jsx(
+              ue,
+              {
+                ref: g,
+                value: b,
+                onChange: (f) => T(f.target.value),
+                onKeyDown: P,
+                placeholder: m,
+                disabled: o,
+                className: "flex-1"
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              ce,
+              {
+                onClick: S,
+                disabled: o || !b.trim(),
+                size: "icon",
+                children: /* @__PURE__ */ r.jsx(de, { className: "h-4 w-4" })
+              }
+            )
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+B.displayName = "Chatbot";
+const ve = ({
+  message: a,
+  showTimestamp: d,
+  userAvatarUrl: m,
+  userAvatarFallback: c,
+  assistantAvatarUrl: o,
+  assistantAvatarFallback: u
+}) => {
+  const s = a.role === "user";
+  if (a.role === "system")
+    return /* @__PURE__ */ r.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ r.jsx("div", { className: "text-xs text-muted-foreground bg-muted px-3 py-1 rounded-full", children: a.content }) });
+  const v = s ? a.avatar || m : a.avatar || o, x = s ? a.avatarFallback || c : a.avatarFallback || u;
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: A(
+        "flex gap-3",
+        s ? "flex-row-reverse" : "flex-row"
+      ),
+      children: [
+        /* @__PURE__ */ r.jsxs(J, { className: "h-8 w-8", children: [
+          /* @__PURE__ */ r.jsx(G, { src: v }),
+          /* @__PURE__ */ r.jsx(X, { className: "text-xs", children: x })
+        ] }),
+        /* @__PURE__ */ r.jsxs("div", { className: A("flex flex-col gap-1", s ? "items-end" : "items-start"), children: [
+          /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: A(
+                "rounded-lg px-4 py-2 max-w-[70%] break-words",
+                s ? "bg-primary text-primary-foreground" : "bg-muted"
+              ),
+              children: /* @__PURE__ */ r.jsx("p", { className: "text-sm whitespace-pre-wrap", children: a.content })
+            }
+          ),
+          d && a.timestamp && /* @__PURE__ */ r.jsx("span", { className: "text-xs text-muted-foreground", children: a.timestamp })
+        ] })
+      ]
+    }
+  );
+}, xe = h.forwardRef(
+  ({ className: a, avatarSrc: d, avatarFallback: m = "AI", ...c }, o) => /* @__PURE__ */ r.jsxs("div", { ref: o, className: A("flex gap-3", a), ...c, children: [
+    /* @__PURE__ */ r.jsxs(J, { className: "h-8 w-8", children: [
+      /* @__PURE__ */ r.jsx(G, { src: d }),
+      /* @__PURE__ */ r.jsx(X, { className: "text-xs", children: m })
+    ] }),
+    /* @__PURE__ */ r.jsx("div", { className: "flex items-center bg-muted rounded-lg px-4 py-2", children: /* @__PURE__ */ r.jsxs("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ r.jsx("span", { className: "w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.3s]" }),
+      /* @__PURE__ */ r.jsx("span", { className: "w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.15s]" }),
+      /* @__PURE__ */ r.jsx("span", { className: "w-2 h-2 bg-muted-foreground rounded-full animate-bounce" })
+    ] }) })
+  ] })
+);
+xe.displayName = "TypingIndicator";
+export {
+  B as Chatbot,
+  xe as TypingIndicator
+};

package/dist/index.umd.cjs

@@ -0,0 +1,6 @@
+(function(v,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@object-ui/components"),require("lucide-react"),require("@object-ui/core")):typeof define=="function"&&define.amd?define(["exports","react","@object-ui/components","lucide-react","@object-ui/core"],g):(v=typeof globalThis<"u"?globalThis:v||self,g(v.ObjectUIPluginChatbot={},v.React,v.ObjectUIComponents,v.LucideReact,v.ObjectUICore))})(this,(function(v,g,m,Z,K){"use strict";function Q(a){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const c in a)if(c!=="default"){const d=Object.getOwnPropertyDescriptor(a,c);Object.defineProperty(u,c,d.get?d:{enumerable:!0,get:()=>a[c]})}}return u.default=a,Object.freeze(u)}const R=Q(g);var S={exports:{}},_={};var V;function ee(){if(V)return _;V=1;var a=Symbol.for("react.transitional.element"),u=Symbol.for("react.fragment");function c(d,o,f){var s=null;if(f!==void 0&&(s=""+f),o.key!==void 0&&(s=""+o.key),"key"in o){f={};for(var b in o)b!=="key"&&(f[b]=o[b])}else f=o;return o=f.ref,{$$typeof:a,type:d,key:s,ref:o!==void 0?o:null,props:f}}return _.Fragment=u,_.jsx=c,_.jsxs=c,_}var A={};var L;function ae(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case F:return"Profiler";case P:return"StrictMode";case oe:return"Suspense";case le:return"SuspenseList";case ue:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case k:return"Portal";case se:return e.displayName||"Context";case p:return(e._context.displayName||"Context")+".Consumer";case ne:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return t=e.displayName||null,t!==null?t:a(e.type)||"Memo";case D:t=e._payload,e=e._init;try{return a(e(t))}catch{}}return null}function u(e){return""+e}function c(e){try{u(e);var t=!1}catch{t=!0}if(t){t=console;var n=t.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),u(e)}}function d(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===D)return"<...>";try{var t=a(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function o(){var e=U.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function s(e){if(H.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function b(e,t){function n(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function y(){var e=a(this.type);return J[e]||(J[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function h(e,t,n,l,C,Y){var i=n.ref;return e={$$typeof:w,type:e,key:t,props:n,_owner:l},(i!==void 0?i:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Y}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,t,n,l,C,Y){var i=t.children;if(i!==void 0)if(l)if(de(i)){for(l=0;l<i.length;l++)N(i[l]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else N(i);if(H.call(t,"key")){i=a(e);var E=Object.keys(t).filter(function(fe){return fe!=="key"});l=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",B[i+l]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,l,i,E,i),B[i+l]=!0)}if(i=null,n!==void 0&&(c(n),i=""+n),s(t)&&(c(t.key),i=""+t.key),"key"in t){n={};for(var $ in t)$!=="key"&&(n[$]=t[$])}else n=t;return i&&b(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,i,n,o(),C,Y)}function N(e){O(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===D&&(e._payload.status==="fulfilled"?O(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function O(e){return typeof e=="object"&&e!==null&&e.$$typeof===w}var x=g,w=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),P=Symbol.for("react.strict_mode"),F=Symbol.for("react.profiler"),p=Symbol.for("react.consumer"),se=Symbol.for("react.context"),ne=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),U=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,de=Array.isArray,M=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(e){return e()}};var z,J={},G=x.react_stack_bottom_frame.bind(x,f)(),X=M(d(f)),B={};A.Fragment=j,A.jsx=function(e,t,n){var l=1e4>U.recentlyCreatedOwnerStacks++;return T(e,t,n,!1,l?Error("react-stack-top-frame"):G,l?M(d(e)):X)},A.jsxs=function(e,t,n){var l=1e4>U.recentlyCreatedOwnerStacks++;return T(e,t,n,!0,l?Error("react-stack-top-frame"):G,l?M(d(e)):X)}})()),A}var q;function te(){return q||(q=1,process.env.NODE_ENV==="production"?S.exports=ee():S.exports=ae()),S.exports}var r=te();K.ComponentRegistry.register("chatbot",({schema:a,className:u,...c})=>{const[d,o]=g.useState(a.messages?.map((s,b)=>({id:s.id||`msg-${b}`,role:s.role||"user",content:s.content||"",timestamp:typeof s.timestamp=="string"?s.timestamp:s.timestamp instanceof Date?s.timestamp.toISOString():void 0,avatar:s.avatar,avatarFallback:s.avatarFallback}))||[]),f=s=>{const b={id:crypto?.randomUUID?.()||`msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,role:"user",content:s,timestamp:a.showTimestamp?new Date().toLocaleTimeString():void 0},y=[...d,b];o(y),a.onSend&&a.onSend(s,y),a.autoResponse&&setTimeout(()=>{const h={id:crypto?.randomUUID?.()||`msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,role:"assistant",content:a.autoResponseText||"Thank you for your message!",timestamp:a.showTimestamp?new Date().toLocaleTimeString():void 0};o(T=>[...T,h])},a.autoResponseDelay||1e3)};return r.jsx(I,{messages:d,placeholder:a.placeholder,onSendMessage:f,disabled:a.disabled,showTimestamp:a.showTimestamp,userAvatarUrl:a.userAvatarUrl,userAvatarFallback:a.userAvatarFallback,assistantAvatarUrl:a.assistantAvatarUrl,assistantAvatarFallback:a.assistantAvatarFallback,maxHeight:a.maxHeight,className:u,...c})},{label:"Chatbot",inputs:[{name:"messages",type:"array",label:"Initial Messages",description:"Array of message objects with id, role, content, and optional timestamp"},{name:"placeholder",type:"string",label:"Input Placeholder",defaultValue:"Type your message..."},{name:"showTimestamp",type:"boolean",label:"Show Timestamps",defaultValue:!1},{name:"disabled",type:"boolean",label:"Disabled",defaultValue:!1},{name:"userAvatarUrl",type:"string",label:"User Avatar URL",description:"URL of the user avatar image"},{name:"userAvatarFallback",type:"string",label:"User Avatar Fallback",defaultValue:"You",description:"Fallback text shown when user avatar image is not available"},{name:"assistantAvatarUrl",type:"string",label:"Assistant Avatar URL",description:"URL of the assistant avatar image"},{name:"assistantAvatarFallback",type:"string",label:"Assistant Avatar Fallback",defaultValue:"AI",description:"Fallback text shown when assistant avatar image is not available"},{name:"maxHeight",type:"string",label:"Max Height",defaultValue:"500px"},{name:"autoResponse",type:"boolean",label:"Enable Auto Response (Demo)",defaultValue:!1,description:"Automatically send a response after user message (for demo purposes)"},{name:"autoResponseText",type:"string",label:"Auto Response Text",defaultValue:"Thank you for your message!"},{name:"autoResponseDelay",type:"number",label:"Auto Response Delay (ms)",defaultValue:1e3},{name:"className",type:"string",label:"CSS Class"}],defaultProps:{messages:[{id:"welcome",role:"assistant",content:"Hello! How can I help you today?"}],placeholder:"Type your message...",showTimestamp:!1,disabled:!1,userAvatarFallback:"You",assistantAvatarFallback:"AI",maxHeight:"500px",autoResponse:!0,autoResponseText:"Thank you for your message! This is an automated response.",autoResponseDelay:1e3,className:"w-full max-w-2xl"}});const I=R.forwardRef(({className:a,messages:u=[],placeholder:c="Type your message...",onSendMessage:d,disabled:o=!1,showTimestamp:f=!1,userAvatarUrl:s,userAvatarFallback:b="You",assistantAvatarUrl:y,assistantAvatarFallback:h="AI",maxHeight:T="500px",...N},O)=>{const[x,w]=R.useState(""),k=R.useRef(null),j=R.useRef(null);R.useEffect(()=>{if(k.current){const p=k.current.querySelector("[data-radix-scroll-area-viewport]");p&&(p.scrollTop=p.scrollHeight)}},[u]);const P=()=>{x.trim()&&d&&(d(x.trim()),w(""),j.current?.focus())},F=p=>{p.key==="Enter"&&!p.shiftKey&&(p.preventDefault(),P())};return r.jsxs("div",{ref:O,className:m.cn("flex flex-col border rounded-lg bg-background overflow-hidden",a),style:{maxHeight:T},...N,children:[r.jsx(m.ScrollArea,{ref:k,className:"flex-1 p-4",children:r.jsx("div",{className:"space-y-4",children:u.length===0?r.jsx("div",{className:"flex items-center justify-center h-32 text-muted-foreground text-sm",children:"No messages yet. Start a conversation!"}):u.map(p=>r.jsx(re,{message:p,showTimestamp:f,userAvatarUrl:s,userAvatarFallback:b,assistantAvatarUrl:y,assistantAvatarFallback:h},p.id))})}),r.jsx("div",{className:"border-t p-4",children:r.jsxs("div",{className:"flex gap-2",children:[r.jsx(m.Input,{ref:j,value:x,onChange:p=>w(p.target.value),onKeyDown:F,placeholder:c,disabled:o,className:"flex-1"}),r.jsx(m.Button,{onClick:P,disabled:o||!x.trim(),size:"icon",children:r.jsx(Z.Send,{className:"h-4 w-4"})})]})})]})});I.displayName="Chatbot";const re=({message:a,showTimestamp:u,userAvatarUrl:c,userAvatarFallback:d,assistantAvatarUrl:o,assistantAvatarFallback:f})=>{const s=a.role==="user";if(a.role==="system")return r.jsx("div",{className:"flex justify-center",children:r.jsx("div",{className:"text-xs text-muted-foreground bg-muted px-3 py-1 rounded-full",children:a.content})});const y=s?a.avatar||c:a.avatar||o,h=s?a.avatarFallback||d:a.avatarFallback||f;return r.jsxs("div",{className:m.cn("flex gap-3",s?"flex-row-reverse":"flex-row"),children:[r.jsxs(m.Avatar,{className:"h-8 w-8",children:[r.jsx(m.AvatarImage,{src:y}),r.jsx(m.AvatarFallback,{className:"text-xs",children:h})]}),r.jsxs("div",{className:m.cn("flex flex-col gap-1",s?"items-end":"items-start"),children:[r.jsx("div",{className:m.cn("rounded-lg px-4 py-2 max-w-[70%] break-words",s?"bg-primary text-primary-foreground":"bg-muted"),children:r.jsx("p",{className:"text-sm whitespace-pre-wrap",children:a.content})}),u&&a.timestamp&&r.jsx("span",{className:"text-xs text-muted-foreground",children:a.timestamp})]})]})},W=R.forwardRef(({className:a,avatarSrc:u,avatarFallback:c="AI",...d},o)=>r.jsxs("div",{ref:o,className:m.cn("flex gap-3",a),...d,children:[r.jsxs(m.Avatar,{className:"h-8 w-8",children:[r.jsx(m.AvatarImage,{src:u}),r.jsx(m.AvatarFallback,{className:"text-xs",children:c})]}),r.jsx("div",{className:"flex items-center bg-muted rounded-lg px-4 py-2",children:r.jsxs("div",{className:"flex gap-1",children:[r.jsx("span",{className:"w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.3s]"}),r.jsx("span",{className:"w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.15s]"}),r.jsx("span",{className:"w-2 h-2 bg-muted-foreground rounded-full animate-bounce"})]})})]}));W.displayName="TypingIndicator",v.Chatbot=I,v.TypingIndicator=W,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));

package/dist/src/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as React from "react";
+export interface ChatMessage {
+    id: string;
+    role: "user" | "assistant" | "system";
+    content: string;
+    timestamp?: string;
+    avatar?: string;
+    avatarFallback?: string;
+}
+export interface ChatbotProps extends React.HTMLAttributes<HTMLDivElement> {
+    messages?: ChatMessage[];
+    placeholder?: string;
+    onSendMessage?: (message: string) => void;
+    disabled?: boolean;
+    showTimestamp?: boolean;
+    userAvatarUrl?: string;
+    userAvatarFallback?: string;
+    assistantAvatarUrl?: string;
+    assistantAvatarFallback?: string;
+    maxHeight?: string;
+}
+declare const Chatbot: React.ForwardRefExoticComponent<ChatbotProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatMessageProps {
+    message: ChatMessage;
+    showTimestamp?: boolean;
+    userAvatarUrl?: string;
+    userAvatarFallback?: string;
+    assistantAvatarUrl?: string;
+    assistantAvatarFallback?: string;
+}
+export interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    avatarSrc?: string;
+    avatarFallback?: string;
+}
+declare const TypingIndicator: React.ForwardRefExoticComponent<TypingIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export { Chatbot, TypingIndicator };
+export * from './renderer';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAGD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,QAAA,MAAM,OAAO,qFAwGZ,CAAA;AAID,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAA;CACjC;AAiED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,eAAe,6FAkBpB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAA;AAGnC,cAAc,YAAY,CAAC"}

package/dist/src/renderer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {};
+//# sourceMappingURL=renderer.d.ts.map

package/dist/src/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/renderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@object-ui/plugin-chatbot",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Chatbot interface plugin for Object UI",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-chatbot"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "lucide-react": "^0.563.0",
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  }
+}

package/src/index.tsx

@@ -0,0 +1,248 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import { cn } from "@object-ui/components"
+import { Button, Input, ScrollArea, Avatar, AvatarFallback, AvatarImage } from "@object-ui/components"
+import { Send } from "lucide-react"
+
+// Message type definition
+export interface ChatMessage {
+  id: string
+  role: "user" | "assistant" | "system"
+  content: string
+  timestamp?: string
+  avatar?: string
+  avatarFallback?: string
+}
+
+// Chatbot container props
+export interface ChatbotProps extends React.HTMLAttributes<HTMLDivElement> {
+  messages?: ChatMessage[]
+  placeholder?: string
+  onSendMessage?: (message: string) => void
+  disabled?: boolean
+  showTimestamp?: boolean
+  userAvatarUrl?: string
+  userAvatarFallback?: string
+  assistantAvatarUrl?: string
+  assistantAvatarFallback?: string
+  maxHeight?: string
+}
+
+// Chatbot container component
+const Chatbot = React.forwardRef<HTMLDivElement, ChatbotProps>(
+  (
+    {
+      className,
+      messages = [],
+      placeholder = "Type your message...",
+      onSendMessage,
+      disabled = false,
+      showTimestamp = false,
+      userAvatarUrl,
+      userAvatarFallback = "You",
+      assistantAvatarUrl,
+      assistantAvatarFallback = "AI",
+      maxHeight = "500px",
+      ...props
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = React.useState("")
+    const scrollRef = React.useRef<HTMLDivElement>(null)
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    // Auto-scroll to bottom when new messages arrive
+    React.useEffect(() => {
+      if (scrollRef.current) {
+        const scrollElement = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]')
+        if (scrollElement) {
+          scrollElement.scrollTop = scrollElement.scrollHeight
+        }
+      }
+    }, [messages])
+
+    const handleSend = () => {
+      if (inputValue.trim() && onSendMessage) {
+        onSendMessage(inputValue.trim())
+        setInputValue("")
+        inputRef.current?.focus()
+      }
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault()
+        handleSend()
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col border rounded-lg bg-background overflow-hidden",
+          className
+        )}
+        style={{ maxHeight }}
+        {...props}
+      >
+        {/* Messages area */}
+        <ScrollArea ref={scrollRef} className="flex-1 p-4">
+          <div className="space-y-4">
+            {messages.length === 0 ? (
+              <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">
+                No messages yet. Start a conversation!
+              </div>
+            ) : (
+              messages.map((message) => (
+                <ChatMessageItem
+                  key={message.id}
+                  message={message}
+                  showTimestamp={showTimestamp}
+                  userAvatarUrl={userAvatarUrl}
+                  userAvatarFallback={userAvatarFallback}
+                  assistantAvatarUrl={assistantAvatarUrl}
+                  assistantAvatarFallback={assistantAvatarFallback}
+                />
+              ))
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Input area */}
+        <div className="border-t p-4">
+          <div className="flex gap-2">
+            <Input
+              ref={inputRef}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder}
+              disabled={disabled}
+              className="flex-1"
+            />
+            <Button
+              onClick={handleSend}
+              disabled={disabled || !inputValue.trim()}
+              size="icon"
+            >
+              <Send className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Chatbot.displayName = "Chatbot"
+
+// Individual message component
+export interface ChatMessageProps {
+  message: ChatMessage
+  showTimestamp?: boolean
+  userAvatarUrl?: string
+  userAvatarFallback?: string
+  assistantAvatarUrl?: string
+  assistantAvatarFallback?: string
+}
+
+const ChatMessageItem: React.FC<ChatMessageProps> = ({
+  message,
+  showTimestamp,
+  userAvatarUrl,
+  userAvatarFallback,
+  assistantAvatarUrl,
+  assistantAvatarFallback,
+}) => {
+  const isUser = message.role === "user"
+  const isSystem = message.role === "system"
+
+  if (isSystem) {
+    return (
+      <div className="flex justify-center">
+        <div className="text-xs text-muted-foreground bg-muted px-3 py-1 rounded-full">
+          {message.content}
+        </div>
+      </div>
+    )
+  }
+
+  const avatar = isUser 
+    ? (message.avatar || userAvatarUrl)
+    : (message.avatar || assistantAvatarUrl)
+  
+  const avatarFallback = isUser
+    ? (message.avatarFallback || userAvatarFallback)
+    : (message.avatarFallback || assistantAvatarFallback)
+
+  return (
+    <div
+      className={cn(
+        "flex gap-3",
+        isUser ? "flex-row-reverse" : "flex-row"
+      )}
+    >
+      <Avatar className="h-8 w-8">
+        <AvatarImage src={avatar} />
+        <AvatarFallback className="text-xs">{avatarFallback}</AvatarFallback>
+      </Avatar>
+
+      <div className={cn("flex flex-col gap-1", isUser ? "items-end" : "items-start")}>
+        <div
+          className={cn(
+            "rounded-lg px-4 py-2 max-w-[70%] break-words",
+            isUser
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted"
+          )}
+        >
+          <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+        </div>
+        {showTimestamp && message.timestamp && (
+          <span className="text-xs text-muted-foreground">
+            {message.timestamp}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Typing indicator component
+export interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  avatarSrc?: string
+  avatarFallback?: string
+}
+
+const TypingIndicator = React.forwardRef<HTMLDivElement, TypingIndicatorProps>(
+  ({ className, avatarSrc, avatarFallback = "AI", ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("flex gap-3", className)} {...props}>
+        <Avatar className="h-8 w-8">
+          <AvatarImage src={avatarSrc} />
+          <AvatarFallback className="text-xs">{avatarFallback}</AvatarFallback>
+        </Avatar>
+        <div className="flex items-center bg-muted rounded-lg px-4 py-2">
+          <div className="flex gap-1">
+            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.3s]"></span>
+            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce [animation-delay:-0.15s]"></span>
+            <span className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce"></span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+TypingIndicator.displayName = "TypingIndicator"
+
+export { Chatbot, TypingIndicator }
+
+// Export renderer to register the component with ObjectUI
+export * from './renderer';

package/src/renderer.tsx

@@ -0,0 +1,193 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { ChatbotSchema, ChatMessage } from '@object-ui/types';
+import { Chatbot } from './index';
+import { useState } from 'react';
+
+/**
+ * Chatbot component for Object UI
+ * 
+ * @remarks
+ * This component supports an optional `onSend` callback in the schema:
+ * - Signature: `onSend(content: string, messages: ChatMessage[]): void`
+ * - Parameters:
+ *   - content: The message text that was sent
+ *   - messages: Array of all messages including the newly added message
+ * - Called when: User sends a message via the input field
+ * - Use case: Connect to backend API or trigger custom actions on message send
+ */
+ComponentRegistry.register('chatbot', 
+  ({ schema, className, ...props }: { schema: ChatbotSchema; className?: string; [key: string]: any }) => {
+    // Initialize messages from schema or use empty array
+    const [messages, setMessages] = useState<ChatMessage[]>(
+      schema.messages?.map((msg: any, idx: number) => ({
+        id: msg.id || `msg-${idx}`,
+        role: msg.role || 'user',
+        content: msg.content || '',
+        timestamp: typeof msg.timestamp === 'string' ? msg.timestamp : (msg.timestamp instanceof Date ? msg.timestamp.toISOString() : undefined),
+        avatar: msg.avatar,
+        avatarFallback: msg.avatarFallback,
+      })) || []
+    );
+
+    // Handle sending new messages
+    const handleSendMessage = (content: string) => {
+      // Create user message with robust ID generation
+      const userMessage: ChatMessage = {
+        id: crypto?.randomUUID?.() || `msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+        role: 'user',
+        content,
+        timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
+      };
+
+      const updatedMessages = [...messages, userMessage];
+      setMessages(updatedMessages);
+
+      // If onSend callback is provided in schema, call it with updated messages
+      if (schema.onSend) {
+        schema.onSend(content, updatedMessages);
+      }
+
+      // Auto-response feature for demo purposes
+      if (schema.autoResponse) {
+        setTimeout(() => {
+          const assistantMessage: ChatMessage = {
+            id: crypto?.randomUUID?.() || `msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+            role: 'assistant',
+            content: schema.autoResponseText || 'Thank you for your message!',
+            timestamp: schema.showTimestamp ? new Date().toLocaleTimeString() : undefined,
+          };
+          setMessages((prev) => [...prev, assistantMessage]);
+        }, schema.autoResponseDelay || 1000);
+      }
+    };
+
+    return (
+      <Chatbot 
+        messages={messages as any}
+        placeholder={schema.placeholder}
+        onSendMessage={handleSendMessage}
+        disabled={schema.disabled}
+        showTimestamp={schema.showTimestamp}
+        userAvatarUrl={schema.userAvatarUrl}
+        userAvatarFallback={schema.userAvatarFallback}
+        assistantAvatarUrl={schema.assistantAvatarUrl}
+        assistantAvatarFallback={schema.assistantAvatarFallback}
+        maxHeight={schema.maxHeight}
+        className={className}
+        {...props}
+      />
+    );
+  },
+  {
+    label: 'Chatbot',
+    inputs: [
+      { 
+        name: 'messages', 
+        type: 'array', 
+        label: 'Initial Messages',
+        description: 'Array of message objects with id, role, content, and optional timestamp'
+      },
+      { 
+        name: 'placeholder', 
+        type: 'string', 
+        label: 'Input Placeholder',
+        defaultValue: 'Type your message...'
+      },
+      { 
+        name: 'showTimestamp', 
+        type: 'boolean', 
+        label: 'Show Timestamps',
+        defaultValue: false
+      },
+      { 
+        name: 'disabled', 
+        type: 'boolean', 
+        label: 'Disabled',
+        defaultValue: false
+      },
+      { 
+        name: 'userAvatarUrl', 
+        type: 'string', 
+        label: 'User Avatar URL',
+        description: 'URL of the user avatar image'
+      },
+      { 
+        name: 'userAvatarFallback', 
+        type: 'string', 
+        label: 'User Avatar Fallback',
+        defaultValue: 'You',
+        description: 'Fallback text shown when user avatar image is not available'
+      },
+      { 
+        name: 'assistantAvatarUrl', 
+        type: 'string', 
+        label: 'Assistant Avatar URL',
+        description: 'URL of the assistant avatar image'
+      },
+      { 
+        name: 'assistantAvatarFallback', 
+        type: 'string', 
+        label: 'Assistant Avatar Fallback',
+        defaultValue: 'AI',
+        description: 'Fallback text shown when assistant avatar image is not available'
+      },
+      { 
+        name: 'maxHeight', 
+        type: 'string', 
+        label: 'Max Height',
+        defaultValue: '500px'
+      },
+      { 
+        name: 'autoResponse', 
+        type: 'boolean', 
+        label: 'Enable Auto Response (Demo)',
+        defaultValue: false,
+        description: 'Automatically send a response after user message (for demo purposes)'
+      },
+      { 
+        name: 'autoResponseText', 
+        type: 'string', 
+        label: 'Auto Response Text',
+        defaultValue: 'Thank you for your message!'
+      },
+      { 
+        name: 'autoResponseDelay', 
+        type: 'number', 
+        label: 'Auto Response Delay (ms)',
+        defaultValue: 1000
+      },
+      { 
+        name: 'className', 
+        type: 'string', 
+        label: 'CSS Class'
+      }
+    ],
+    defaultProps: {
+      messages: [
+        {
+          id: 'welcome',
+          role: 'assistant',
+          content: 'Hello! How can I help you today?',
+        }
+      ],
+      placeholder: 'Type your message...',
+      showTimestamp: false,
+      disabled: false,
+      userAvatarFallback: 'You',
+      assistantAvatarFallback: 'AI',
+      maxHeight: '500px',
+      autoResponse: true,
+      autoResponseText: 'Thank you for your message! This is an automated response.',
+      autoResponseDelay: 1000,
+      className: 'w-full max-w-2xl'
+    }
+  }
+);

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "noEmit": false,
+    "declaration": true,
+    "composite": true,
+    "declarationMap": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,49 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+      exclude: ['**/*.test.ts', '**/*.test.tsx', 'node_modules'],
+      skipDiagnostics: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginChatbot',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react', 'lucide-react'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@object-ui/components': 'ObjectUIComponents',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
+          'lucide-react': 'LucideReact',
+        },
+      },
+    },
+  },
+});