npm - @tigmart/ai-ui - Versions diffs - 0.0.1 - Mend

@tigmart/ai-ui 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,76 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { MessageRole, MessageStatus, Message } from '@topsoft/ai-types';
+import { ProviderId } from '@topsoft/ai-react';
+export { ProviderId } from '@topsoft/ai-react';
+interface ChatContainerProps {
+    children: ReactNode;
+}
+declare function ChatContainer({ children }: ChatContainerProps): react_jsx_runtime.JSX.Element;
+interface MessageBubbleProps {
+    role: MessageRole;
+    text: string;
+    status: MessageStatus;
+    errorDetail?: string;
+}
+declare function MessageBubble({ role, text, status, errorDetail }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+interface MessageListProps {
+    messages: Message[];
+    isLoading?: boolean;
+    emptyText?: string;
+    loadingText?: string;
+    error?: string | null;
+}
+declare const MessageList: react.ForwardRefExoticComponent<MessageListProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatComposerProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    onStop: () => void;
+    isLoading: boolean;
+    disabled?: boolean;
+}
+declare const ChatComposer: react.ForwardRefExoticComponent<ChatComposerProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface ConversationItem {
+    id: string;
+    title: string;
+    projectId?: string | null;
+}
+interface ProjectItem {
+    id: string;
+    name: string;
+}
+interface ChatSidebarProps {
+    conversations: ConversationItem[];
+    currentId: string;
+    onSelect: (id: string) => void;
+    onNewChat: () => void;
+    onRename: (id: string, newTitle: string) => void;
+    onDelete: (id: string) => void;
+    projects: ProjectItem[];
+    onNewProject: () => void;
+    onAssignToProject: (threadId: string, projectId: string | null) => void;
+}
+declare function ChatSidebar({ conversations, currentId, onSelect, onNewChat, onRename, onDelete, projects, onNewProject, onAssignToProject, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
+interface ProviderSelectorProps {
+    value: ProviderId;
+    onChange: (value: ProviderId) => void;
+    disabled?: boolean;
+}
+declare function ProviderSelector({ value, onChange, disabled }: ProviderSelectorProps): react_jsx_runtime.JSX.Element;
+interface ComparisonToggleProps {
+    enabled: boolean;
+    onChange: (enabled: boolean) => void;
+    disabled?: boolean;
+}
+declare function ComparisonToggle({ enabled, onChange, disabled }: ComparisonToggleProps): react_jsx_runtime.JSX.Element;
+export { ChatComposer, type ChatComposerProps, ChatContainer, type ChatContainerProps, ChatSidebar, type ChatSidebarProps, ComparisonToggle, type ComparisonToggleProps, type ConversationItem, MessageBubble, type MessageBubbleProps, MessageList, type MessageListProps, type ProjectItem, ProviderSelector, type ProviderSelectorProps };

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,76 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { MessageRole, MessageStatus, Message } from '@topsoft/ai-types';
+import { ProviderId } from '@topsoft/ai-react';
+export { ProviderId } from '@topsoft/ai-react';
+interface ChatContainerProps {
+    children: ReactNode;
+}
+declare function ChatContainer({ children }: ChatContainerProps): react_jsx_runtime.JSX.Element;
+interface MessageBubbleProps {
+    role: MessageRole;
+    text: string;
+    status: MessageStatus;
+    errorDetail?: string;
+}
+declare function MessageBubble({ role, text, status, errorDetail }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+interface MessageListProps {
+    messages: Message[];
+    isLoading?: boolean;
+    emptyText?: string;
+    loadingText?: string;
+    error?: string | null;
+}
+declare const MessageList: react.ForwardRefExoticComponent<MessageListProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatComposerProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    onStop: () => void;
+    isLoading: boolean;
+    disabled?: boolean;
+}
+declare const ChatComposer: react.ForwardRefExoticComponent<ChatComposerProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface ConversationItem {
+    id: string;
+    title: string;
+    projectId?: string | null;
+}
+interface ProjectItem {
+    id: string;
+    name: string;
+}
+interface ChatSidebarProps {
+    conversations: ConversationItem[];
+    currentId: string;
+    onSelect: (id: string) => void;
+    onNewChat: () => void;
+    onRename: (id: string, newTitle: string) => void;
+    onDelete: (id: string) => void;
+    projects: ProjectItem[];
+    onNewProject: () => void;
+    onAssignToProject: (threadId: string, projectId: string | null) => void;
+}
+declare function ChatSidebar({ conversations, currentId, onSelect, onNewChat, onRename, onDelete, projects, onNewProject, onAssignToProject, }: ChatSidebarProps): react_jsx_runtime.JSX.Element;
+interface ProviderSelectorProps {
+    value: ProviderId;
+    onChange: (value: ProviderId) => void;
+    disabled?: boolean;
+}
+declare function ProviderSelector({ value, onChange, disabled }: ProviderSelectorProps): react_jsx_runtime.JSX.Element;
+interface ComparisonToggleProps {
+    enabled: boolean;
+    onChange: (enabled: boolean) => void;
+    disabled?: boolean;
+}
+declare function ComparisonToggle({ enabled, onChange, disabled }: ComparisonToggleProps): react_jsx_runtime.JSX.Element;
+export { ChatComposer, type ChatComposerProps, ChatContainer, type ChatContainerProps, ChatSidebar, type ChatSidebarProps, ComparisonToggle, type ComparisonToggleProps, type ConversationItem, MessageBubble, type MessageBubbleProps, MessageList, type MessageListProps, type ProjectItem, ProviderSelector, type ProviderSelectorProps };

package/dist/index.js ADDED Viewed

@@ -0,0 +1,564 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ChatComposer: () => ChatComposer,
+  ChatContainer: () => ChatContainer,
+  ChatSidebar: () => ChatSidebar,
+  ComparisonToggle: () => ComparisonToggle,
+  MessageBubble: () => MessageBubble,
+  MessageList: () => MessageList,
+  ProviderSelector: () => ProviderSelector
+});
+module.exports = __toCommonJS(index_exports);
+// src/ChatContainer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ChatContainer({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        maxWidth: "720px",
+        flex: 1
+      },
+      children
+    }
+  );
+}
+// src/MessageBubble.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MessageBubble({ role, text, status, errorDetail }) {
+  const isError = status === "error";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        alignSelf: role === "user" ? "flex-end" : "flex-start",
+        maxWidth: "85%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: "0.7rem",
+              fontWeight: 600,
+              marginBottom: "4px",
+              textTransform: "uppercase",
+              opacity: 0.6
+            },
+            children: role
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "10px 14px",
+              borderRadius: "8px",
+              backgroundColor: isError ? "#fee2e2" : role === "user" ? "#1d4ed8" : "#f0f0f0",
+              color: isError ? "#991b1b" : role === "user" ? "#fff" : "#111",
+              fontSize: "0.9rem",
+              lineHeight: 1.5,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word"
+            },
+            children: [
+              text || (status === "streaming" ? "\u2026" : ""),
+              isError && errorDetail && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "6px", fontSize: "0.8rem" }, children: [
+                "Error: ",
+                errorDetail
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+// src/MessageList.tsx
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function extractText(msg) {
+  return msg.parts.filter((p) => p.type === "text").map((p) => p.type === "text" ? p.text : "").join("");
+}
+var MessageList = (0, import_react.forwardRef)(
+  function MessageList2({
+    messages,
+    isLoading = false,
+    emptyText = "Start a conversation\u2026",
+    loadingText = "Assistant is typing\u2026",
+    error
+  }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          style: {
+            flex: 1,
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+            marginBottom: "16px",
+            minHeight: "400px",
+            maxHeight: "600px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            padding: "16px",
+            backgroundColor: "#fff"
+          },
+          children: [
+            messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "p",
+              {
+                style: {
+                  color: "#999",
+                  fontSize: "0.875rem",
+                  margin: "auto",
+                  textAlign: "center"
+                },
+                children: emptyText
+              }
+            ) : messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              MessageBubble,
+              {
+                role: msg.role,
+                text: extractText(msg),
+                status: msg.status,
+                errorDetail: msg.error
+              },
+              msg.id
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            minHeight: "24px",
+            marginBottom: "8px",
+            fontSize: "0.8rem",
+            color: "#555"
+          },
+          children: isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: loadingText })
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          style: {
+            padding: "10px 14px",
+            borderRadius: "8px",
+            backgroundColor: "#fee2e2",
+            color: "#991b1b",
+            fontSize: "0.85rem",
+            marginBottom: "8px"
+          },
+          children: error
+        }
+      )
+    ] });
+  }
+);
+// src/ChatComposer.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChatComposer = (0, import_react2.forwardRef)(
+  function ChatComposer2({ value, onChange, onSend, onStop, isLoading, disabled = false }, ref) {
+    const sendDisabled = isLoading || disabled || !value.trim();
+    function handleKeyDown(e) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        if (!sendDisabled) onSend();
+      }
+    }
+    function handleChange(e) {
+      onChange(e.target.value);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "textarea",
+        {
+          ref,
+          style: {
+            flex: 1,
+            padding: "10px 12px",
+            fontSize: "0.9rem",
+            borderRadius: "8px",
+            border: "1px solid #ccc",
+            resize: "none",
+            lineHeight: 1.5,
+            outline: "none",
+            fontFamily: "inherit"
+          },
+          rows: 3,
+          value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Type a message\u2026 (Enter to send, Shift+Enter for newline)",
+          disabled
+        }
+      ),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          style: {
+            padding: "10px 18px",
+            borderRadius: "8px",
+            border: "none",
+            cursor: "pointer",
+            fontWeight: 600,
+            fontSize: "0.875rem",
+            backgroundColor: "#e5e7eb",
+            color: "#374151",
+            flexShrink: 0
+          },
+          onClick: onStop,
+          children: "Stop"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          style: {
+            padding: "10px 18px",
+            borderRadius: "8px",
+            border: "none",
+            cursor: sendDisabled ? "not-allowed" : "pointer",
+            fontWeight: 600,
+            fontSize: "0.875rem",
+            backgroundColor: sendDisabled ? "#93c5fd" : "#1d4ed8",
+            color: "#fff",
+            opacity: sendDisabled ? 0.7 : 1,
+            flexShrink: 0
+          },
+          onClick: onSend,
+          disabled: sendDisabled,
+          children: "Send"
+        }
+      )
+    ] });
+  }
+);
+// src/ChatSidebar.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var sidebarStyle = {
+  width: "240px",
+  flexShrink: 0,
+  borderRight: "1px solid #e2e8f0",
+  backgroundColor: "#f8fafc",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden"
+};
+var headerStyle = {
+  padding: "12px",
+  borderBottom: "1px solid #e2e8f0",
+  display: "flex",
+  flexDirection: "column",
+  gap: "6px"
+};
+var newChatButtonStyle = {
+  width: "100%",
+  padding: "8px 12px",
+  backgroundColor: "#2563eb",
+  color: "#fff",
+  border: "none",
+  borderRadius: "6px",
+  fontSize: "14px",
+  fontWeight: 500,
+  cursor: "pointer",
+  textAlign: "left"
+};
+var newProjectButtonStyle = {
+  width: "100%",
+  padding: "6px 12px",
+  backgroundColor: "transparent",
+  color: "#6b7280",
+  border: "1px dashed #cbd5e1",
+  borderRadius: "6px",
+  fontSize: "13px",
+  cursor: "pointer",
+  textAlign: "left"
+};
+var listStyle = {
+  flex: 1,
+  overflowY: "auto",
+  padding: "8px 6px"
+};
+var sectionLabelStyle = {
+  padding: "6px 8px 2px",
+  fontSize: "11px",
+  fontWeight: 600,
+  color: "#94a3b8",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em"
+};
+function rowStyle(isActive) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    marginBottom: "2px",
+    borderRadius: "6px",
+    backgroundColor: isActive ? "#dbeafe" : "transparent"
+  };
+}
+function labelButtonStyle(isActive) {
+  return {
+    flex: 1,
+    minWidth: 0,
+    padding: "7px 8px",
+    backgroundColor: "transparent",
+    color: isActive ? "#1d4ed8" : "#374151",
+    border: "none",
+    borderRadius: "6px",
+    fontSize: "13px",
+    fontWeight: isActive ? 500 : 400,
+    cursor: "pointer",
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  };
+}
+var actionButtonStyle = {
+  flexShrink: 0,
+  padding: "4px 5px",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "4px",
+  fontSize: "12px",
+  cursor: "pointer",
+  color: "#6b7280",
+  lineHeight: 1
+};
+var projectSelectStyle = {
+  flexShrink: 0,
+  fontSize: "11px",
+  border: "1px solid #e2e8f0",
+  borderRadius: "4px",
+  backgroundColor: "#fff",
+  color: "#6b7280",
+  padding: "2px 2px",
+  cursor: "pointer",
+  maxWidth: "70px"
+};
+function ChatSidebar({
+  conversations,
+  currentId,
+  onSelect,
+  onNewChat,
+  onRename,
+  onDelete,
+  projects,
+  onNewProject,
+  onAssignToProject
+}) {
+  function handleRename(id, currentTitle) {
+    const next = window.prompt("Rename chat:", currentTitle);
+    if (next !== null && next.trim()) {
+      onRename(id, next.trim());
+    }
+  }
+  function renderChatRow(conv) {
+    const isActive = conv.id === currentId;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: rowStyle(isActive), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          style: labelButtonStyle(isActive),
+          onClick: () => onSelect(conv.id),
+          title: conv.title,
+          children: conv.title
+        }
+      ),
+      projects.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "select",
+        {
+          style: projectSelectStyle,
+          value: conv.projectId ?? "",
+          onChange: (e) => onAssignToProject(conv.id, e.target.value || null),
+          title: "Move to project",
+          "aria-label": "Assign to project",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "\u2014" }),
+            projects.map((p) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: p.id, children: p.name }, p.id))
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          style: actionButtonStyle,
+          onClick: () => handleRename(conv.id, conv.title),
+          title: "Rename",
+          "aria-label": "Rename chat",
+          children: "\u270F\uFE0F"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          style: { ...actionButtonStyle, marginRight: "4px" },
+          onClick: () => onDelete(conv.id),
+          title: "Delete",
+          "aria-label": "Delete chat",
+          children: "\u{1F5D1}\uFE0F"
+        }
+      )
+    ] }, conv.id);
+  }
+  const ungrouped = conversations.filter((c) => !c.projectId);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("aside", { style: sidebarStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: headerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { style: newChatButtonStyle, onClick: onNewChat, children: "+ New chat" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { style: newProjectButtonStyle, onClick: onNewProject, children: "\u{1F4C1} New project" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: listStyle, children: [
+      projects.map((project) => {
+        const chats = conversations.filter((c) => c.projectId === project.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: sectionLabelStyle, children: [
+            "\u{1F4C1} ",
+            project.name
+          ] }),
+          chats.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: {
+                padding: "4px 10px",
+                fontSize: "12px",
+                color: "#cbd5e1",
+                fontStyle: "italic"
+              },
+              children: "No chats yet"
+            }
+          ) : chats.map(renderChatRow)
+        ] }, project.id);
+      }),
+      ungrouped.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+        projects.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: sectionLabelStyle, children: "Ungrouped" }),
+        ungrouped.map(renderChatRow)
+      ] })
+    ] })
+  ] });
+}
+// src/ProviderSelector.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PROVIDERS = [
+  { id: "openai", label: "OpenAI" },
+  { id: "claude", label: "Claude" },
+  { id: "gemini", label: "Gemini" }
+];
+var wrapperStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  marginBottom: "16px"
+};
+var labelStyle = {
+  fontSize: "13px",
+  fontWeight: 500,
+  color: "#374151"
+};
+var selectStyle = {
+  padding: "5px 10px",
+  fontSize: "13px",
+  borderRadius: "6px",
+  border: "1px solid #d1d5db",
+  backgroundColor: "#fff",
+  cursor: "pointer",
+  color: "#111827"
+};
+function ProviderSelector({ value, onChange, disabled }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: wrapperStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: "provider-select", style: labelStyle, children: "Provider:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "select",
+      {
+        id: "provider-select",
+        style: selectStyle,
+        value,
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        children: PROVIDERS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: p.id, children: p.label }, p.id))
+      }
+    )
+  ] });
+}
+// src/ComparisonToggle.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ComparisonToggle({ enabled, onChange, disabled }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "label",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        fontSize: "0.875rem",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: enabled,
+            onChange: (e) => onChange(e.target.checked),
+            disabled,
+            style: { cursor: disabled ? "not-allowed" : "pointer" }
+          }
+        ),
+        "Comparison mode"
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChatComposer,
+  ChatContainer,
+  ChatSidebar,
+  ComparisonToggle,
+  MessageBubble,
+  MessageList,
+  ProviderSelector
+});

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,531 @@
+// src/ChatContainer.tsx
+import { jsx } from "react/jsx-runtime";
+function ChatContainer({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        maxWidth: "720px",
+        flex: 1
+      },
+      children
+    }
+  );
+}
+// src/MessageBubble.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MessageBubble({ role, text, status, errorDetail }) {
+  const isError = status === "error";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        alignSelf: role === "user" ? "flex-end" : "flex-start",
+        maxWidth: "85%"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              fontSize: "0.7rem",
+              fontWeight: 600,
+              marginBottom: "4px",
+              textTransform: "uppercase",
+              opacity: 0.6
+            },
+            children: role
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "10px 14px",
+              borderRadius: "8px",
+              backgroundColor: isError ? "#fee2e2" : role === "user" ? "#1d4ed8" : "#f0f0f0",
+              color: isError ? "#991b1b" : role === "user" ? "#fff" : "#111",
+              fontSize: "0.9rem",
+              lineHeight: 1.5,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word"
+            },
+            children: [
+              text || (status === "streaming" ? "\u2026" : ""),
+              isError && errorDetail && /* @__PURE__ */ jsxs("div", { style: { marginTop: "6px", fontSize: "0.8rem" }, children: [
+                "Error: ",
+                errorDetail
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+// src/MessageList.tsx
+import { forwardRef } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function extractText(msg) {
+  return msg.parts.filter((p) => p.type === "text").map((p) => p.type === "text" ? p.text : "").join("");
+}
+var MessageList = forwardRef(
+  function MessageList2({
+    messages,
+    isLoading = false,
+    emptyText = "Start a conversation\u2026",
+    loadingText = "Assistant is typing\u2026",
+    error
+  }, ref) {
+    return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            flex: 1,
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+            marginBottom: "16px",
+            minHeight: "400px",
+            maxHeight: "600px",
+            border: "1px solid #ddd",
+            borderRadius: "8px",
+            padding: "16px",
+            backgroundColor: "#fff"
+          },
+          children: [
+            messages.length === 0 ? /* @__PURE__ */ jsx3(
+              "p",
+              {
+                style: {
+                  color: "#999",
+                  fontSize: "0.875rem",
+                  margin: "auto",
+                  textAlign: "center"
+                },
+                children: emptyText
+              }
+            ) : messages.map((msg) => /* @__PURE__ */ jsx3(
+              MessageBubble,
+              {
+                role: msg.role,
+                text: extractText(msg),
+                status: msg.status,
+                errorDetail: msg.error
+              },
+              msg.id
+            )),
+            /* @__PURE__ */ jsx3("div", { ref })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            minHeight: "24px",
+            marginBottom: "8px",
+            fontSize: "0.8rem",
+            color: "#555"
+          },
+          children: isLoading && /* @__PURE__ */ jsx3("span", { children: loadingText })
+        }
+      ),
+      error && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            padding: "10px 14px",
+            borderRadius: "8px",
+            backgroundColor: "#fee2e2",
+            color: "#991b1b",
+            fontSize: "0.85rem",
+            marginBottom: "8px"
+          },
+          children: error
+        }
+      )
+    ] });
+  }
+);
+// src/ChatComposer.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChatComposer = forwardRef2(
+  function ChatComposer2({ value, onChange, onSend, onStop, isLoading, disabled = false }, ref) {
+    const sendDisabled = isLoading || disabled || !value.trim();
+    function handleKeyDown(e) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        if (!sendDisabled) onSend();
+      }
+    }
+    function handleChange(e) {
+      onChange(e.target.value);
+    }
+    return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px", alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ jsx4(
+        "textarea",
+        {
+          ref,
+          style: {
+            flex: 1,
+            padding: "10px 12px",
+            fontSize: "0.9rem",
+            borderRadius: "8px",
+            border: "1px solid #ccc",
+            resize: "none",
+            lineHeight: 1.5,
+            outline: "none",
+            fontFamily: "inherit"
+          },
+          rows: 3,
+          value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Type a message\u2026 (Enter to send, Shift+Enter for newline)",
+          disabled
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx4(
+        "button",
+        {
+          style: {
+            padding: "10px 18px",
+            borderRadius: "8px",
+            border: "none",
+            cursor: "pointer",
+            fontWeight: 600,
+            fontSize: "0.875rem",
+            backgroundColor: "#e5e7eb",
+            color: "#374151",
+            flexShrink: 0
+          },
+          onClick: onStop,
+          children: "Stop"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          style: {
+            padding: "10px 18px",
+            borderRadius: "8px",
+            border: "none",
+            cursor: sendDisabled ? "not-allowed" : "pointer",
+            fontWeight: 600,
+            fontSize: "0.875rem",
+            backgroundColor: sendDisabled ? "#93c5fd" : "#1d4ed8",
+            color: "#fff",
+            opacity: sendDisabled ? 0.7 : 1,
+            flexShrink: 0
+          },
+          onClick: onSend,
+          disabled: sendDisabled,
+          children: "Send"
+        }
+      )
+    ] });
+  }
+);
+// src/ChatSidebar.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var sidebarStyle = {
+  width: "240px",
+  flexShrink: 0,
+  borderRight: "1px solid #e2e8f0",
+  backgroundColor: "#f8fafc",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden"
+};
+var headerStyle = {
+  padding: "12px",
+  borderBottom: "1px solid #e2e8f0",
+  display: "flex",
+  flexDirection: "column",
+  gap: "6px"
+};
+var newChatButtonStyle = {
+  width: "100%",
+  padding: "8px 12px",
+  backgroundColor: "#2563eb",
+  color: "#fff",
+  border: "none",
+  borderRadius: "6px",
+  fontSize: "14px",
+  fontWeight: 500,
+  cursor: "pointer",
+  textAlign: "left"
+};
+var newProjectButtonStyle = {
+  width: "100%",
+  padding: "6px 12px",
+  backgroundColor: "transparent",
+  color: "#6b7280",
+  border: "1px dashed #cbd5e1",
+  borderRadius: "6px",
+  fontSize: "13px",
+  cursor: "pointer",
+  textAlign: "left"
+};
+var listStyle = {
+  flex: 1,
+  overflowY: "auto",
+  padding: "8px 6px"
+};
+var sectionLabelStyle = {
+  padding: "6px 8px 2px",
+  fontSize: "11px",
+  fontWeight: 600,
+  color: "#94a3b8",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em"
+};
+function rowStyle(isActive) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    marginBottom: "2px",
+    borderRadius: "6px",
+    backgroundColor: isActive ? "#dbeafe" : "transparent"
+  };
+}
+function labelButtonStyle(isActive) {
+  return {
+    flex: 1,
+    minWidth: 0,
+    padding: "7px 8px",
+    backgroundColor: "transparent",
+    color: isActive ? "#1d4ed8" : "#374151",
+    border: "none",
+    borderRadius: "6px",
+    fontSize: "13px",
+    fontWeight: isActive ? 500 : 400,
+    cursor: "pointer",
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  };
+}
+var actionButtonStyle = {
+  flexShrink: 0,
+  padding: "4px 5px",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "4px",
+  fontSize: "12px",
+  cursor: "pointer",
+  color: "#6b7280",
+  lineHeight: 1
+};
+var projectSelectStyle = {
+  flexShrink: 0,
+  fontSize: "11px",
+  border: "1px solid #e2e8f0",
+  borderRadius: "4px",
+  backgroundColor: "#fff",
+  color: "#6b7280",
+  padding: "2px 2px",
+  cursor: "pointer",
+  maxWidth: "70px"
+};
+function ChatSidebar({
+  conversations,
+  currentId,
+  onSelect,
+  onNewChat,
+  onRename,
+  onDelete,
+  projects,
+  onNewProject,
+  onAssignToProject
+}) {
+  function handleRename(id, currentTitle) {
+    const next = window.prompt("Rename chat:", currentTitle);
+    if (next !== null && next.trim()) {
+      onRename(id, next.trim());
+    }
+  }
+  function renderChatRow(conv) {
+    const isActive = conv.id === currentId;
+    return /* @__PURE__ */ jsxs4("div", { style: rowStyle(isActive), children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          style: labelButtonStyle(isActive),
+          onClick: () => onSelect(conv.id),
+          title: conv.title,
+          children: conv.title
+        }
+      ),
+      projects.length > 0 && /* @__PURE__ */ jsxs4(
+        "select",
+        {
+          style: projectSelectStyle,
+          value: conv.projectId ?? "",
+          onChange: (e) => onAssignToProject(conv.id, e.target.value || null),
+          title: "Move to project",
+          "aria-label": "Assign to project",
+          children: [
+            /* @__PURE__ */ jsx5("option", { value: "", children: "\u2014" }),
+            projects.map((p) => /* @__PURE__ */ jsx5("option", { value: p.id, children: p.name }, p.id))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          style: actionButtonStyle,
+          onClick: () => handleRename(conv.id, conv.title),
+          title: "Rename",
+          "aria-label": "Rename chat",
+          children: "\u270F\uFE0F"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          style: { ...actionButtonStyle, marginRight: "4px" },
+          onClick: () => onDelete(conv.id),
+          title: "Delete",
+          "aria-label": "Delete chat",
+          children: "\u{1F5D1}\uFE0F"
+        }
+      )
+    ] }, conv.id);
+  }
+  const ungrouped = conversations.filter((c) => !c.projectId);
+  return /* @__PURE__ */ jsxs4("aside", { style: sidebarStyle, children: [
+    /* @__PURE__ */ jsxs4("div", { style: headerStyle, children: [
+      /* @__PURE__ */ jsx5("button", { style: newChatButtonStyle, onClick: onNewChat, children: "+ New chat" }),
+      /* @__PURE__ */ jsx5("button", { style: newProjectButtonStyle, onClick: onNewProject, children: "\u{1F4C1} New project" })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: listStyle, children: [
+      projects.map((project) => {
+        const chats = conversations.filter((c) => c.projectId === project.id);
+        return /* @__PURE__ */ jsxs4("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsxs4("div", { style: sectionLabelStyle, children: [
+            "\u{1F4C1} ",
+            project.name
+          ] }),
+          chats.length === 0 ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              style: {
+                padding: "4px 10px",
+                fontSize: "12px",
+                color: "#cbd5e1",
+                fontStyle: "italic"
+              },
+              children: "No chats yet"
+            }
+          ) : chats.map(renderChatRow)
+        ] }, project.id);
+      }),
+      ungrouped.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
+        projects.length > 0 && /* @__PURE__ */ jsx5("div", { style: sectionLabelStyle, children: "Ungrouped" }),
+        ungrouped.map(renderChatRow)
+      ] })
+    ] })
+  ] });
+}
+// src/ProviderSelector.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var PROVIDERS = [
+  { id: "openai", label: "OpenAI" },
+  { id: "claude", label: "Claude" },
+  { id: "gemini", label: "Gemini" }
+];
+var wrapperStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  marginBottom: "16px"
+};
+var labelStyle = {
+  fontSize: "13px",
+  fontWeight: 500,
+  color: "#374151"
+};
+var selectStyle = {
+  padding: "5px 10px",
+  fontSize: "13px",
+  borderRadius: "6px",
+  border: "1px solid #d1d5db",
+  backgroundColor: "#fff",
+  cursor: "pointer",
+  color: "#111827"
+};
+function ProviderSelector({ value, onChange, disabled }) {
+  return /* @__PURE__ */ jsxs5("div", { style: wrapperStyle, children: [
+    /* @__PURE__ */ jsx6("label", { htmlFor: "provider-select", style: labelStyle, children: "Provider:" }),
+    /* @__PURE__ */ jsx6(
+      "select",
+      {
+        id: "provider-select",
+        style: selectStyle,
+        value,
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        children: PROVIDERS.map((p) => /* @__PURE__ */ jsx6("option", { value: p.id, children: p.label }, p.id))
+      }
+    )
+  ] });
+}
+// src/ComparisonToggle.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ComparisonToggle({ enabled, onChange, disabled }) {
+  return /* @__PURE__ */ jsxs6(
+    "label",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        fontSize: "0.875rem",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "checkbox",
+            checked: enabled,
+            onChange: (e) => onChange(e.target.checked),
+            disabled,
+            style: { cursor: disabled ? "not-allowed" : "pointer" }
+          }
+        ),
+        "Comparison mode"
+      ]
+    }
+  );
+}
+export {
+  ChatComposer,
+  ChatContainer,
+  ChatSidebar,
+  ComparisonToggle,
+  MessageBubble,
+  MessageList,
+  ProviderSelector
+};

package/package.json ADDED Viewed

@@ -0,0 +1,42 @@
+{
+  "name": "@tigmart/ai-ui",
+  "version": "0.0.1",
+  "description": "Pre-built chat UI components",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tigmart/ai-react": "workspace:*",
+    "@tigmart/ai-types": "workspace:*",
+    "@radix-ui/react-scroll-area": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.0"
+  }
+}