@meshagent/meshagent-tailwind 0.38.2 → 0.38.3

package/dist/esm/ChatBotView.js

@@ -0,0 +1,486 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDocumentChanged } from "@meshagent/meshagent-react";
+import {
+  AlertTriangle,
+  Check,
+  MessageSquare,
+  MessageSquarePlus,
+  Pencil
+} from "lucide-react";
+import { useThreadStatus } from "./chat-hooks";
+import { Chat } from "./Chat";
+import { Button } from "./components/ui/button";
+import { Spinner } from "./components/ui/spinner";
+import {
+  ChatThreadDisplayMode,
+  chatDocumentPath,
+  defaultThreadDisplayNameFromPath,
+  resolvedThreadListPath
+} from "./conversation-descriptor";
+import { cn } from "./lib/utils";
+import { MultiThreadView } from "./multi-thread-view";
+const multiThreadLayoutBreakpointPx = 920;
+import {
+  ChatThreadDisplayMode as ChatThreadDisplayMode2,
+  chatDocumentPath as chatDocumentPath2,
+  resolvedThreadListPath as resolvedThreadListPath2
+} from "./conversation-descriptor";
+function normalizePath(path) {
+  const normalized = path?.trim();
+  return normalized ? normalized : null;
+}
+function parseDate(value) {
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? /* @__PURE__ */ new Date(0) : parsed;
+}
+function compareThreadEntries(left, right) {
+  const leftSortDate = left.modifiedAt.trim() ? parseDate(left.modifiedAt) : parseDate(left.createdAt);
+  const rightSortDate = right.modifiedAt.trim() ? parseDate(right.modifiedAt) : parseDate(right.createdAt);
+  const dateComparison = rightSortDate.getTime() - leftSortDate.getTime();
+  if (dateComparison !== 0) {
+    return dateComparison;
+  }
+  const leftCreatedAt = parseDate(left.createdAt);
+  const rightCreatedAt = parseDate(right.createdAt);
+  const createdDateComparison = rightCreatedAt.getTime() - leftCreatedAt.getTime();
+  if (createdDateComparison !== 0) {
+    return createdDateComparison;
+  }
+  return left.path.localeCompare(right.path);
+}
+function parseThreadListEntries(document) {
+  const entries = [];
+  for (const child of document.root.getChildren()) {
+    if (child.tagName !== "thread") {
+      continue;
+    }
+    const rawPath = child.getAttribute("path");
+    if (typeof rawPath !== "string" || rawPath.trim() === "") {
+      continue;
+    }
+    const path = rawPath.trim();
+    const rawName = child.getAttribute("name");
+    const rawCreatedAt = child.getAttribute("created_at");
+    const rawModifiedAt = child.getAttribute("modified_at");
+    entries.push({
+      element: child,
+      path,
+      name: typeof rawName === "string" && rawName.trim() !== "" ? rawName.trim() : defaultThreadDisplayNameFromPath(path),
+      createdAt: typeof rawCreatedAt === "string" ? rawCreatedAt : "",
+      modifiedAt: typeof rawModifiedAt === "string" ? rawModifiedAt : ""
+    });
+  }
+  entries.sort(compareThreadEntries);
+  return entries;
+}
+function threadEntriesEqual(left, right) {
+  return left.length === right.length && left.every((entry, index) => {
+    const other = right[index];
+    return entry.path === other?.path && entry.name === other.name && entry.createdAt === other.createdAt && entry.modifiedAt === other.modifiedAt;
+  });
+}
+function describeError(error) {
+  if (error instanceof Error && error.message.trim() !== "") {
+    return error.message;
+  }
+  return `${error}`;
+}
+async function closeDocument(room, path) {
+  try {
+    await room.sync.close(path);
+  } catch {
+  }
+}
+function useIsWideLayout(minWidth) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(`(min-width: ${minWidth}px)`);
+    const updateMatches = (event) => {
+      setMatches(event?.matches ?? mediaQuery.matches);
+    };
+    updateMatches();
+    mediaQuery.addEventListener("change", updateMatches);
+    return () => {
+      mediaQuery.removeEventListener("change", updateMatches);
+    };
+  }, [minWidth]);
+  return matches;
+}
+function useThreadListDocument({
+  room,
+  path
+}) {
+  const [document, setDocument] = useState(null);
+  const [entries, setEntries] = useState([]);
+  const [loading, setLoading] = useState(path !== null);
+  const [error, setError] = useState(null);
+  const syncDocumentState = useCallback((nextDocument) => {
+    const nextEntries = parseThreadListEntries(nextDocument);
+    setEntries((currentEntries) => threadEntriesEqual(currentEntries, nextEntries) ? currentEntries : nextEntries);
+  }, []);
+  useEffect(() => {
+    let cancelled = false;
+    let opened = false;
+    if (path === null) {
+      setDocument(null);
+      setEntries([]);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    setDocument(null);
+    setEntries([]);
+    setLoading(true);
+    setError(null);
+    void room.sync.open(path).then((nextDocument) => {
+      if (cancelled) {
+        void closeDocument(room, path);
+        return;
+      }
+      opened = true;
+      setDocument(nextDocument);
+      syncDocumentState(nextDocument);
+      setLoading(false);
+      setError(null);
+    }).catch((nextError) => {
+      if (cancelled) {
+        return;
+      }
+      setDocument(null);
+      setEntries([]);
+      setLoading(false);
+      setError(nextError);
+    });
+    return () => {
+      cancelled = true;
+      if (opened) {
+        void closeDocument(room, path);
+      }
+    };
+  }, [path, room, syncDocumentState]);
+  useDocumentChanged({
+    document,
+    onChanged: syncDocumentState
+  });
+  return {
+    document,
+    entries,
+    loading,
+    error
+  };
+}
+function ThreadListRow({
+  title,
+  selected,
+  onClick,
+  icon,
+  trailing
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 items-center rounded-lg border border-transparent transition-colors",
+        selected ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-left",
+            onClick,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: icon }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "truncate text-sm font-medium",
+                    selected ? "text-accent-foreground" : "text-foreground"
+                  ),
+                  children: title
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 pr-1", children: trailing ?? /* @__PURE__ */ jsx("div", { className: "h-8 w-8" }) })
+      ]
+    }
+  ) });
+}
+function ThreadListEntryRow({
+  room,
+  entry,
+  agentName,
+  selected,
+  onSelect,
+  onRename
+}) {
+  const status = useThreadStatus({ room, path: entry.path, agentName });
+  const iconClassName = selected ? "text-accent-foreground" : "text-muted-foreground";
+  const hasStatus = status.text?.trim() !== "";
+  return /* @__PURE__ */ jsx(
+    ThreadListRow,
+    {
+      title: entry.name,
+      selected,
+      onClick: () => onSelect(entry),
+      icon: hasStatus ? /* @__PURE__ */ jsx(Spinner, { size: "sm", className: iconClassName }) : selected ? /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4", iconClassName) }) : /* @__PURE__ */ jsx(MessageSquare, { className: cn("h-4 w-4", iconClassName) }),
+      trailing: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 rounded-md",
+          "aria-label": `Rename ${entry.name}`,
+          onClick: () => onRename(entry),
+          children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+        }
+      )
+    }
+  );
+}
+function ThreadListPanel({
+  room,
+  threadList,
+  selectedThreadPath,
+  agentName,
+  onSelectThread,
+  onClearSelection,
+  onRenameThread
+}) {
+  const { entries, error, loading } = threadList;
+  const hasSelectedEntry = selectedThreadPath !== null && entries.some((entry) => entry.path === selectedThreadPath);
+  const showPendingNewThreadSelection = selectedThreadPath === null || !hasSelectedEntry;
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border bg-background", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-6", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "text-muted-foreground" }) }) : error ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-6 text-center text-sm text-muted-foreground", children: `Unable to load threads: ${describeError(error)}` }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto py-1", children: [
+    /* @__PURE__ */ jsx(
+      ThreadListRow,
+      {
+        title: "New thread",
+        selected: showPendingNewThreadSelection,
+        onClick: onClearSelection,
+        icon: showPendingNewThreadSelection ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-accent-foreground" }) : /* @__PURE__ */ jsx(MessageSquarePlus, { className: "h-4 w-4 text-muted-foreground" })
+      }
+    ),
+    entries.length === 0 && showPendingNewThreadSelection ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center px-4 py-6 text-center text-sm text-muted-foreground", children: "No threads yet" }) : null,
+    entries.map((entry) => /* @__PURE__ */ jsx(
+      ThreadListEntryRow,
+      {
+        room,
+        entry,
+        agentName,
+        selected: entry.path === selectedThreadPath,
+        onSelect: onSelectThread,
+        onRename: onRenameThread
+      },
+      entry.path
+    ))
+  ] }) });
+}
+function MultiThreadUnavailable() {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center px-4 py-8", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-[912px] rounded-3xl border border-destructive/30 bg-destructive/5 p-6 text-destructive", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Unable to start a new thread" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-destructive/80", children: "No chat agent is selected." })
+    ] })
+  ] }) }) });
+}
+function ChatBotView({
+  room,
+  path,
+  documentPath,
+  participants,
+  agentName,
+  threadDisplayMode = ChatThreadDisplayMode.SingleThread,
+  threadDir,
+  threadListPath,
+  toolkit,
+  tool,
+  centerComposer = false,
+  emptyStateTitle = "No threads yet",
+  emptyStateDescription = "Start a new conversation to see it here.",
+  selectedThreadPath,
+  onSelectedThreadPathChanged,
+  onSelectedThreadResolved,
+  onThreadResolved,
+  newThreadResetVersion = 0,
+  showThreadList = true,
+  threadListWidth = 280,
+  threadListCollapsedHeight = 220
+}) {
+  const isWideLayout = useIsWideLayout(multiThreadLayoutBreakpointPx);
+  const resolvedDocumentPath = useMemo(
+    () => normalizePath(documentPath ?? path),
+    [documentPath, path]
+  );
+  const resolvedSingleThreadPath = useMemo(
+    () => resolvedDocumentPath ?? chatDocumentPath(agentName, { threadDir }),
+    [agentName, resolvedDocumentPath, threadDir]
+  );
+  const explicitSelectedThreadPath = selectedThreadPath !== void 0 ? normalizePath(selectedThreadPath) : void 0;
+  const legacySelectedThreadPath = threadDisplayMode === ChatThreadDisplayMode.MultiThreadComposer ? resolvedDocumentPath : null;
+  const [internalSelectedThreadPath, setInternalSelectedThreadPath] = useState(() => explicitSelectedThreadPath ?? legacySelectedThreadPath ?? null);
+  const previousLegacySelectedThreadPathRef = useRef(legacySelectedThreadPath);
+  const previousNewThreadResetVersionRef = useRef(newThreadResetVersion);
+  const activeSelectedThreadPath = explicitSelectedThreadPath ?? internalSelectedThreadPath;
+  const resolvedThreadListDocumentPath = useMemo(
+    () => resolvedThreadListPath(threadListPath, { threadDir, agentName }),
+    [agentName, threadDir, threadListPath]
+  );
+  const threadList = useThreadListDocument({
+    room,
+    path: threadDisplayMode === ChatThreadDisplayMode.MultiThreadComposer && showThreadList && resolvedThreadListDocumentPath !== null ? resolvedThreadListDocumentPath : null
+  });
+  useEffect(() => {
+    if (explicitSelectedThreadPath === void 0) {
+      return;
+    }
+    setInternalSelectedThreadPath(explicitSelectedThreadPath);
+  }, [explicitSelectedThreadPath]);
+  useEffect(() => {
+    if (explicitSelectedThreadPath !== void 0) {
+      previousLegacySelectedThreadPathRef.current = legacySelectedThreadPath;
+      return;
+    }
+    if (legacySelectedThreadPath !== previousLegacySelectedThreadPathRef.current) {
+      setInternalSelectedThreadPath(legacySelectedThreadPath);
+    }
+    previousLegacySelectedThreadPathRef.current = legacySelectedThreadPath;
+  }, [explicitSelectedThreadPath, legacySelectedThreadPath]);
+  const emitResolvedThread = useCallback((nextPath, displayName) => {
+    onSelectedThreadResolved?.(nextPath, displayName);
+    onThreadResolved?.(nextPath, displayName);
+  }, [onSelectedThreadResolved, onThreadResolved]);
+  const handleSelectedThreadPathChanged = useCallback((nextPath) => {
+    const normalizedNextPath = normalizePath(nextPath);
+    if (explicitSelectedThreadPath === void 0) {
+      setInternalSelectedThreadPath(normalizedNextPath);
+    }
+    onSelectedThreadPathChanged?.(normalizedNextPath);
+  }, [explicitSelectedThreadPath, onSelectedThreadPathChanged]);
+  const setSelectedThread = useCallback((nextPath, displayName) => {
+    const normalizedNextPath = normalizePath(nextPath);
+    handleSelectedThreadPathChanged(normalizedNextPath);
+    emitResolvedThread(normalizedNextPath, displayName);
+  }, [emitResolvedThread, handleSelectedThreadPathChanged]);
+  useEffect(() => {
+    if (threadDisplayMode !== ChatThreadDisplayMode.MultiThreadComposer) {
+      previousNewThreadResetVersionRef.current = newThreadResetVersion;
+      return;
+    }
+    if (previousNewThreadResetVersionRef.current !== newThreadResetVersion && activeSelectedThreadPath !== null) {
+      setSelectedThread(null, null);
+    }
+    previousNewThreadResetVersionRef.current = newThreadResetVersion;
+  }, [activeSelectedThreadPath, newThreadResetVersion, setSelectedThread, threadDisplayMode]);
+  const handleRenameThread = useCallback((entry) => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const nextName = window.prompt("Rename thread", entry.name);
+    if (nextName === null) {
+      return;
+    }
+    const trimmedName = nextName.trim();
+    if (trimmedName === "" || trimmedName === entry.name) {
+      return;
+    }
+    entry.element.setAttribute("name", trimmedName);
+    if (entry.path === activeSelectedThreadPath) {
+      emitResolvedThread(entry.path, trimmedName);
+    }
+  }, [activeSelectedThreadPath, emitResolvedThread]);
+  if (threadDisplayMode !== ChatThreadDisplayMode.MultiThreadComposer) {
+    return /* @__PURE__ */ jsx(
+      Chat,
+      {
+        room,
+        path: resolvedSingleThreadPath,
+        participants,
+        agentName,
+        toolkit,
+        tool,
+        centerComposer,
+        emptyStateTitle,
+        emptyStateDescription,
+        onThreadResolved
+      }
+    );
+  }
+  if (!agentName?.trim()) {
+    return /* @__PURE__ */ jsx(MultiThreadUnavailable, {});
+  }
+  const content = /* @__PURE__ */ jsx(
+    MultiThreadView,
+    {
+      room,
+      agentName,
+      toolkit,
+      tool,
+      selectedThreadPath: activeSelectedThreadPath,
+      onSelectedThreadPathChanged: handleSelectedThreadPathChanged,
+      onSelectedThreadResolved: emitResolvedThread,
+      newThreadResetVersion,
+      centerComposer,
+      emptyStateTitle,
+      emptyStateDescription,
+      builder: (threadPath) => /* @__PURE__ */ jsx(
+        Chat,
+        {
+          room,
+          path: threadPath,
+          participants,
+          agentName,
+          toolkit,
+          tool,
+          centerComposer,
+          emptyStateTitle,
+          emptyStateDescription
+        }
+      )
+    }
+  );
+  if (!showThreadList || resolvedThreadListDocumentPath === null) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1 h-full", isWideLayout ? "flex-row items-stretch" : "flex-col"), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full min-h-0 min-w-0 flex-1", children: content }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("shrink-0 mr-4", isWideLayout ? "ml-3" : "mt-3"),
+        style: isWideLayout ? { width: threadListWidth } : { height: threadListCollapsedHeight },
+        children: /* @__PURE__ */ jsx(
+          ThreadListPanel,
+          {
+            room,
+            threadList,
+            selectedThreadPath: activeSelectedThreadPath,
+            agentName,
+            onSelectThread: (entry) => {
+              setSelectedThread(entry.path, entry.name);
+            },
+            onClearSelection: () => {
+              setSelectedThread(null, null);
+            },
+            onRenameThread: handleRenameThread
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  ChatBotView,
+  ChatThreadDisplayMode2 as ChatThreadDisplayMode,
+  chatDocumentPath2 as chatDocumentPath,
+  resolvedThreadListPath2 as resolvedThreadListPath
+};

package/dist/esm/ChatInput.d.ts

@@ -1,12 +1,21 @@
-import { ChatMessage, FileUpload } from "@meshagent/meshagent-react";
+import type { ReactElement } from "react";
+import { ChatMessage } from "./chat-message";
+import { type FileUpload } from "./file-attachment";
 interface ChatInputProps {
-    onSubmit: (message: ChatMessage) => void;
+    onSubmit: (message: ChatMessage) => void | Promise<void>;
     onFilesSelected: (files: File[]) => void;
     attachments: FileUpload[];
     setAttachments: (attachments: FileUpload[]) => void;
     onTextChange?: (text: string) => void;
     onCancelRequest?: () => void;
     showCancelButton?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    clearOnSubmit?: boolean;
+    autoFocus?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
 }
-export declare function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments, onTextChange, onCancelRequest, showCancelButton }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments, onTextChange, onCancelRequest, showCancelButton, placeholder, disabled, clearOnSubmit, autoFocus, value: controlledValue, defaultValue, onValueChange, }: ChatInputProps): ReactElement;
 export {};