@drewswiredin/backstage-plugin-assistants 0.5.4 → 0.6.0

package/dist/collapsible/CollapsiblePage.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import './surface/styles/assistant-ui.css.esm.js';
 import './surface/styles/assistant-ui-markdown.css.esm.js';
-import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { useApi } from '@backstage/core-plugin-api';
@@ -13,16 +13,15 @@ import ChatBubbleOutlineIcon from '@material-ui/icons/ChatBubbleOutline';
 import CheckIcon from '@material-ui/icons/Check';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import StarIcon from '@material-ui/icons/Star';
-import { AssistantRuntimeProvider, useThread } from '@assistant-ui/react';
-import { useChatRuntime } from '@assistant-ui/react-ai-sdk';
-import { DefaultChatTransport } from 'ai';
+import { useRemoteThreadListRuntime, AssistantRuntimeProvider, useAssistantRuntime } from '@assistant-ui/react';
 import { assistantsApiRef } from '../api/AssistantsApi.esm.js';
 import { ConversationSurface } from './surface/ConversationSurface.esm.js';
 import { AssistantAvatar } from './surface/AssistantAvatar.esm.js';
 import { SidePane } from './SidePane.esm.js';
 import { FullHeightRegion } from './FullHeightRegion.esm.js';
-import { useConversations, persistConversationMessages } from './useConversations.esm.js';
-import { useUnreadVersion, markUnread, clearUnread, hasUnread, isConversationUnread } from './unreadStore.esm.js';
+import { createThreadListAdapter, patchThread } from './threadListAdapter.esm.js';
+import { makeRuntimeHook } from './useAssistantRuntime.esm.js';
+import { useThreadStatus } from './useThreadStatus.esm.js';
 
 const SIDEPANE_COLLAPSED_KEY = "ai-chat-sidepane-collapsed";
 function loadSidePaneCollapsed() {
@@ -33,8 +32,6 @@ function loadSidePaneCollapsed() {
   }
 }
 const useStyles = makeStyles((theme) => ({
-  // Flex-column fill inside the measured FullHeightRegion (mirrors the native
-  // page): lets the shell own the remaining height without a nested <Page>.
   content: {
     flex: 1,
     minHeight: 0,
@@ -47,10 +44,6 @@ const useStyles = makeStyles((theme) => ({
     minHeight: 0,
     overflow: "hidden",
     backgroundColor: theme.palette.background.default,
-    // No top gutter so the card tucks flush under the page header (reclaims the
-    // gap there); 8px right/bottom keep it enclosed on those sides, 0 left since
-    // it abuts the sidebar. Composer breathing room lives on the Thread's own
-    // footer (see ConversationSurface) — same bg, no seam.
     paddingTop: 0,
     paddingRight: theme.spacing(1),
     paddingBottom: theme.spacing(1),
@@ -137,7 +130,6 @@ const useStyles = makeStyles((theme) => ({
     boxShadow: theme.shadows[1],
     overflow: "hidden"
   },
-  // Slim, solid header.
   threadHeader: {
     display: "flex",
     alignItems: "center",
@@ -194,11 +186,6 @@ const useStyles = makeStyles((theme) => ({
       right: theme.spacing(0.5)
     }
   },
-  // Trigger label: vendor in muted text, model name emphasized.
-  modelTriggerVendor: {
-    color: theme.palette.text.hint,
-    marginRight: theme.spacing(0.5)
-  },
   modelGroupLabel: {
     lineHeight: 2,
     fontSize: theme.typography.caption.fontSize,
@@ -226,25 +213,17 @@ const useStyles = makeStyles((theme) => ({
     minHeight: 0,
     display: "flex",
     flexDirection: "column"
-    // NOTE: no paddingBottom here — the Thread fills this box with its own
-    // --aui-background; padding would expose the card's paper bg and create a
-    // two-tone seam. Composer breathing room lives on .aui-thread-viewport-footer
-    // (same bg) in ConversationSurface.
   },
-  // Background thread: kept mounted (stream alive) but out of view/layout.
-  threadPaneHidden: {
-    display: "none"
+  // The "generating" indicator: a pulsing dot, distinct from the solid unread dot.
+  "@keyframes auiPulse": {
+    "0%": { transform: "scale(1)", opacity: 1 },
+    "50%": { transform: "scale(1.5)", opacity: 0.45 },
+    "100%": { transform: "scale(1)", opacity: 1 }
+  },
+  pulseDot: {
+    animation: "$auiPulse 1.2s ease-in-out infinite"
   }
 }));
-function RunningReporter({
-  onRunningChange
-}) {
-  const isRunning = useThread((t) => t.isRunning);
-  useEffect(() => {
-    onRunningChange?.(isRunning);
-  }, [isRunning, onRunningChange]);
-  return null;
-}
 function splitModel(id, pool) {
   const opt = pool.find((m) => m.id === id);
   const raw = opt?.model ?? id;
@@ -257,262 +236,245 @@ function splitModel(id, pool) {
 function modelLabel(id, pool) {
   return splitModel(id, pool).name;
 }
-function ChatThread({
-  baseUrl,
-  authFetch,
-  assistantId,
-  modelId,
-  title,
-  assistantName,
-  initialMessages,
-  onFinish,
-  composerPlaceholder,
-  suggestions,
-  assistantColor,
-  headerRight,
-  hidden,
-  onRunningChange
+function CollapsiblePage() {
+  const api = useApi(assistantsApiRef);
+  const [searchParams] = useSearchParams();
+  const requestedAssistant = searchParams.get("assistant");
+  const status = useAsync(() => api.getStatus(), [api]);
+  if (status.loading) {
+    return /* @__PURE__ */ jsx(Progress, {});
+  }
+  if (status.error) {
+    return /* @__PURE__ */ jsx(ResponseErrorPanel, { error: status.error });
+  }
+  if (!status.value) {
+    return null;
+  }
+  const assistants = status.value.assistants;
+  if (assistants.length === 0) {
+    return /* @__PURE__ */ jsx(
+      ResponseErrorPanel,
+      {
+        error: new Error("No assistants are available to you.")
+      }
+    );
+  }
+  const assistant = assistants.find((a) => a.id === requestedAssistant) ?? assistants[0];
+  return /* @__PURE__ */ jsx(CollapsibleChat, { status: status.value, assistant }, assistant.id);
+}
+function CollapsibleChat({
+  status,
+  assistant
 }) {
-  const classes = useStyles();
-  const selectionRef = useRef({ assistantId, modelId });
-  selectionRef.current = { assistantId, modelId };
-  const transport = useMemo(
-    () => new DefaultChatTransport({
-      api: `${baseUrl}/chat`,
-      fetch: authFetch,
-      body: () => ({
-        assistantId: selectionRef.current.assistantId,
-        modelId: selectionRef.current.modelId
-      })
-    }),
-    [authFetch, baseUrl]
-  );
-  const onFinishRef = useRef(onFinish);
-  onFinishRef.current = onFinish;
-  const stableOnFinish = useCallback(({ messages }) => {
-    onFinishRef.current?.(messages);
-  }, []);
-  const runtime = useChatRuntime({
-    transport,
-    messages: initialMessages,
-    onFinish: stableOnFinish
-  });
-  return /* @__PURE__ */ jsxs(AssistantRuntimeProvider, { runtime, children: [
-    /* @__PURE__ */ jsx(RunningReporter, { onRunningChange }),
-    /* @__PURE__ */ jsxs(
-      "main",
+  const api = useApi(assistantsApiRef);
+  const baseUrl = useAsync(() => api.getBaseUrl(), [api]);
+  if (baseUrl.loading) {
+    return /* @__PURE__ */ jsx(Progress, {});
+  }
+  if (baseUrl.error || !baseUrl.value) {
+    return /* @__PURE__ */ jsx(
+      ResponseErrorPanel,
       {
-        className: hidden ? `${classes.threadPane} ${classes.threadPaneHidden}` : classes.threadPane,
-        "aria-label": "AI chat thread",
-        "aria-hidden": hidden,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: classes.threadHeader, children: [
-            /* @__PURE__ */ jsxs("div", { className: classes.threadIdentity, children: [
-              /* @__PURE__ */ jsx(AssistantAvatar, { color: assistantColor, size: 22 }),
-              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: classes.assistantName, children: assistantName }),
-              title && /* @__PURE__ */ jsxs(
-                Typography,
-                {
-                  variant: "body2",
-                  className: classes.threadTitle,
-                  title,
-                  children: [
-                    "\xB7 ",
-                    title
-                  ]
-                }
-              )
-            ] }),
-            headerRight
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: classes.threadBody, children: /* @__PURE__ */ jsx(
-            ConversationSurface,
-            {
-              composerPlaceholder,
-              suggestions,
-              assistantColor
-            }
-          ) })
-        ]
+        error: baseUrl.error ?? new Error("Failed to resolve backend URL")
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ChatRuntime,
+    {
+      status,
+      assistant,
+      api,
+      baseUrl: baseUrl.value
+    }
+  );
 }
-function useLiveThreads(active) {
-  const [mounted, setMounted] = useState([]);
-  const [running, setRunning] = useState(
-    () => /* @__PURE__ */ new Set()
+function ChatRuntime({
+  status,
+  assistant,
+  api,
+  baseUrl
+}) {
+  const defaultModel = assistant.defaultModel ?? status.defaultModel;
+  const modelIdRef = useRef(defaultModel);
+  const adapter = useMemo(
+    () => createThreadListAdapter(api, assistant.id),
+    [api, assistant.id]
   );
-  const activeRef = useRef(active);
-  activeRef.current = active;
-  useEffect(() => {
-    const a = activeRef.current;
-    setMounted((prev) => {
-      const byId = new Map(prev.map((d) => [d.convId, d]));
-      if (a && !byId.has(a.convId)) {
-        byId.set(a.convId, a);
-      }
-      const keep = new Set(running);
-      if (a) {
-        keep.add(a.convId);
-      }
-      const next = [];
-      for (const d of prev) {
-        if (keep.has(d.convId)) {
-          next.push(byId.get(d.convId) ?? d);
-          keep.delete(d.convId);
-        }
-      }
-      for (const id of keep) {
-        const d = byId.get(id);
-        if (d) {
-          next.push(d);
-        }
-      }
-      const unchanged = next.length === prev.length && next.every((d, i) => d.convId === prev[i].convId);
-      return unchanged ? prev : next;
-    });
-  }, [active?.convId, running]);
-  const setThreadRunning = useCallback((convId, isRunning) => {
-    setRunning((prev) => {
-      const has = prev.has(convId);
-      if (isRunning === has) {
-        return prev;
-      }
-      const next = new Set(prev);
-      if (isRunning) {
-        next.add(convId);
-      } else {
-        next.delete(convId);
-      }
-      return next;
-    });
-  }, []);
-  const threads = active && !mounted.some((d) => d.convId === active.convId) ? [...mounted, active] : mounted;
-  return { threads, setThreadRunning };
+  const runtimeHook = useMemo(
+    () => makeRuntimeHook({ api, baseUrl, assistantId: assistant.id, modelIdRef }),
+    [api, baseUrl, assistant.id]
+  );
+  const runtime = useRemoteThreadListRuntime({ adapter, runtimeHook });
+  return /* @__PURE__ */ jsx(AssistantRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx(
+    ChatChrome,
+    {
+      status,
+      assistant,
+      api,
+      modelIdRef,
+      defaultModel
+    }
+  ) });
 }
-function CollapsibleChat({ status, assistant }) {
+function ChatChrome({
+  status,
+  assistant,
+  api,
+  modelIdRef,
+  defaultModel
+}) {
   const classes = useStyles();
-  const api = useApi(assistantsApiRef);
-  useUnreadVersion();
+  const runtime = useAssistantRuntime();
   const [, setSearchParams] = useSearchParams();
-  const handleSelectAssistant = useCallback(
-    (id) => {
-      if (id !== assistant.id) {
-        setSearchParams({ assistant: id });
-      }
-    },
-    [assistant.id, setSearchParams]
+  const [threadList, setThreadList] = useState(
+    () => runtime.threads.getState()
   );
-  const baseUrl = useAsync(() => api.getBaseUrl(), [api]);
+  useEffect(() => {
+    setThreadList(runtime.threads.getState());
+    return runtime.threads.subscribe(
+      () => setThreadList(runtime.threads.getState())
+    );
+  }, [runtime]);
+  const activeId = threadList.mainThreadId;
+  const activeItem = threadList.threadItems[activeId];
+  const activeRemoteId = activeItem?.remoteId;
+  const activeTitle = activeItem?.title ?? "";
+  const { statusOf, agentStatus, markRead, finishedTick } = useThreadStatus(
+    api,
+    activeRemoteId
+  );
+  const didSelectInitial = useRef(false);
+  useEffect(() => {
+    if (didSelectInitial.current || threadList.isLoading) return;
+    didSelectInitial.current = true;
+    if (activeId !== threadList.newThreadId) return;
+    const mostRecent = [...threadList.threadIds].map((id) => ({
+      id,
+      updatedAt: threadList.threadItems[id]?.custom?.updatedAt ?? ""
+    })).sort((a, b) => a.updatedAt < b.updatedAt ? 1 : -1)[0]?.id;
+    if (mostRecent) {
+      void runtime.threads.switchToThread(mostRecent);
+    }
+  }, [threadList.isLoading]);
+  const conversations = useMemo(
+    () => threadList.threadIds.map((id) => {
+      const item = threadList.threadItems[id];
+      const custom = item?.custom;
+      const st = id === activeId ? "read" : statusOf(item?.remoteId);
+      return {
+        id,
+        remoteId: item?.remoteId,
+        title: item?.title ?? "New Chat",
+        pinned: custom?.pinned ?? false,
+        unread: st === "unread",
+        generating: st === "working"
+      };
+    }),
+    [threadList, activeId, statusOf]
+  );
+  useEffect(() => {
+    if (finishedTick > 0) {
+      void runtime.threads.reload();
+    }
+  }, [finishedTick, runtime]);
   const allowedModels = useMemo(
     () => assistant.models ?? status.models.map((m) => m.id),
     [assistant.models, status.models]
   );
-  const defaultModel = assistant.defaultModel ?? status.defaultModel;
   const modelGroups = useMemo(() => {
     const byVendor = /* @__PURE__ */ new Map();
     for (const id of allowedModels) {
       const { vendor } = splitModel(id, status.models);
       const list = byVendor.get(vendor);
-      if (list) {
-        list.push(id);
-      } else {
-        byVendor.set(vendor, [id]);
-      }
+      if (list) list.push(id);
+      else byVendor.set(vendor, [id]);
     }
     return [...byVendor.entries()];
   }, [allowedModels, status.models]);
-  const convState = useConversations(assistant.id);
   const resolveModel = useCallback(
     (stored) => stored && allowedModels.includes(stored) ? stored : defaultModel,
     [allowedModels, defaultModel]
   );
   const [modelId, setModelId] = useState(
-    () => resolveModel(convState.activeConversation?.model)
+    () => resolveModel(activeItem?.custom?.model)
   );
   useEffect(() => {
-    setModelId(resolveModel(convState.activeConversation?.model));
-  }, [convState.activeId]);
-  const handleModelChange = useCallback(
-    (next) => {
-      setModelId(next);
-      if (convState.activeId) {
-        convState.setConversationModel(convState.activeId, next);
-      }
-    },
-    [convState]
-  );
-  const [sidePaneCollapsed, setSidePaneCollapsed] = useState(
-    loadSidePaneCollapsed
-  );
+    const stored = threadList.threadItems[activeId]?.custom?.model;
+    const next = resolveModel(stored);
+    setModelId(next);
+    modelIdRef.current = next;
+  }, [activeId]);
+  useEffect(() => {
+    if (activeRemoteId) markRead(activeRemoteId);
+  }, [activeRemoteId]);
+  const [sidePaneCollapsed, setSidePaneCollapsed] = useState(loadSidePaneCollapsed);
   useEffect(() => {
     try {
       localStorage.setItem(SIDEPANE_COLLAPSED_KEY, String(sidePaneCollapsed));
     } catch {
     }
   }, [sidePaneCollapsed]);
+  const handleSelectAssistant = useCallback(
+    (id) => {
+      if (id !== assistant.id) setSearchParams({ assistant: id });
+    },
+    [assistant.id, setSearchParams]
+  );
   const handleNew = useCallback(() => {
-    convState.createConversation();
-  }, [convState]);
-  const handleThreadFinish = useCallback(
-    (descriptor, messages) => {
-      const sameAgent = descriptor.agentId === assistant.id;
-      const viewing = sameAgent && descriptor.convId === convState.activeId;
-      if (sameAgent) {
-        convState.updateMessages(descriptor.convId, messages);
-      } else {
-        persistConversationMessages(
-          descriptor.agentId,
-          descriptor.convId,
-          messages
-        );
+    void (async () => {
+      await runtime.threads.switchToNewThread();
+      try {
+        await runtime.threads.mainItem.initialize();
+        await runtime.threads.reload();
+      } catch {
       }
-      if (!viewing) {
-        markUnread(descriptor.agentId, descriptor.convId);
+    })();
+  }, [runtime]);
+  const handleSelect = useCallback(
+    (id) => {
+      if (id) void runtime.threads.switchToThread(id);
+    },
+    [runtime]
+  );
+  const handleRename = useCallback(
+    (id, title) => {
+      void (async () => {
+        await runtime.threads.getItemById(id).rename(title);
+        await runtime.threads.reload();
+      })();
+    },
+    [runtime]
+  );
+  const handleDelete = useCallback(
+    (id) => {
+      void runtime.threads.getItemById(id).delete();
+    },
+    [runtime]
+  );
+  const handlePin = useCallback(
+    async (id) => {
+      const item = threadList.threadItems[id];
+      if (!item?.remoteId) return;
+      const pinned = item.custom?.pinned ?? false;
+      try {
+        await patchThread(api, item.remoteId, { pinned: !pinned });
+        await runtime.threads.reload();
+      } catch {
       }
-      if (sameAgent) {
-        const conv = convState.conversations.find(
-          (c) => c.id === descriptor.convId
-        );
-        const shouldTitle = conv?.title === "New Chat" && messages.some((m) => m.role === "user") && messages.some((m) => m.role === "assistant");
-        if (shouldTitle) {
-          api.getTitle({
-            assistantId: descriptor.agentId,
-            modelId: descriptor.modelId,
-            messages
-          }).then((generated) => {
-            if (generated && generated !== "New Chat") {
-              convState.renameConversation(descriptor.convId, generated);
-            }
-          }).catch(() => {
-          });
-        }
+    },
+    [api, runtime, threadList]
+  );
+  const handleModelChange = useCallback(
+    (next) => {
+      setModelId(next);
+      modelIdRef.current = next;
+      if (activeRemoteId) {
+        void patchThread(api, activeRemoteId, { model: next });
       }
     },
-    [api, assistant.id, convState]
+    [api, activeRemoteId, modelIdRef]
   );
-  useEffect(() => {
-    if (!convState.activeId) {
-      convState.createConversation();
-    }
-  }, []);
-  useEffect(() => {
-    if (convState.activeId) {
-      clearUnread(assistant.id, convState.activeId);
-    }
-  }, [assistant.id, convState.activeId]);
-  const activeDescriptor = convState.activeId ? {
-    convId: convState.activeId,
-    agentId: assistant.id,
-    assistantTitle: assistant.title,
-    assistantColor: assistant.color,
-    modelId,
-    initialMessages: convState.activeConversation?.messages,
-    composerPlaceholder: assistant.ui?.composer?.placeholder,
-    suggestions: assistant.ui?.suggestions
-  } : null;
-  const { threads, setThreadRunning } = useLiveThreads(activeDescriptor);
   const modelPicker = /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
     Select,
     {
@@ -551,17 +513,6 @@ function CollapsibleChat({ status, assistant }) {
       ])
     }
   ) });
-  if (baseUrl.loading) {
-    return /* @__PURE__ */ jsx(Progress, {});
-  }
-  if (baseUrl.error || !baseUrl.value) {
-    return /* @__PURE__ */ jsx(
-      ResponseErrorPanel,
-      {
-        error: baseUrl.error ?? new Error("Failed to resolve backend URL")
-      }
-    );
-  }
   return /* @__PURE__ */ jsx(FullHeightRegion, { children: /* @__PURE__ */ jsx(Content, { noPadding: true, className: classes.content, children: /* @__PURE__ */ jsxs("div", { className: classes.shell, children: [
     sidePaneCollapsed ? /* @__PURE__ */ jsxs(
       "aside",
@@ -579,32 +530,26 @@ function CollapsibleChat({ status, assistant }) {
               children: /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" })
             }
           ) }) }),
-          /* @__PURE__ */ jsx(
-            "nav",
+          /* @__PURE__ */ jsx("nav", { className: classes.sidePaneRailAssistants, "aria-label": "Assistants", children: status.assistants.map((a) => /* @__PURE__ */ jsx(Tooltip, { title: a.title, placement: "right", children: /* @__PURE__ */ jsx(
+            IconButton,
             {
-              className: classes.sidePaneRailAssistants,
-              "aria-label": "Assistants",
-              children: status.assistants.map((a) => /* @__PURE__ */ jsx(Tooltip, { title: a.title, placement: "right", children: /* @__PURE__ */ jsx(
-                IconButton,
+              size: "small",
+              className: `${classes.sidePaneRailButton} ${a.id === assistant.id ? classes.sidePaneRailButtonActive : ""}`,
+              "aria-label": a.title,
+              onClick: () => handleSelectAssistant(a.id),
+              children: /* @__PURE__ */ jsx(
+                Badge,
                 {
-                  size: "small",
-                  className: `${classes.sidePaneRailButton} ${a.id === assistant.id ? classes.sidePaneRailButtonActive : ""}`,
-                  "aria-label": a.title,
-                  onClick: () => handleSelectAssistant(a.id),
-                  children: /* @__PURE__ */ jsx(
-                    Badge,
-                    {
-                      color: "error",
-                      variant: "dot",
-                      overlap: "circular",
-                      invisible: !hasUnread(a.id),
-                      children: /* @__PURE__ */ jsx(AssistantAvatar, { color: a.color, size: 24 })
-                    }
-                  )
+                  color: agentStatus(a.id) === "working" ? "primary" : "error",
+                  variant: "dot",
+                  overlap: "circular",
+                  invisible: agentStatus(a.id) === "read",
+                  classes: agentStatus(a.id) === "working" ? { dot: classes.pulseDot } : void 0,
+                  children: /* @__PURE__ */ jsx(AssistantAvatar, { color: a.color, size: 24 })
                 }
-              ) }, a.id))
+              )
             }
-          ),
+          ) }, a.id)) }),
           /* @__PURE__ */ jsx("div", { className: classes.sidePaneRailDivider }),
           /* @__PURE__ */ jsx("div", { className: classes.sidePaneRailControls, children: /* @__PURE__ */ jsx(Tooltip, { title: "New Chat", placement: "right", children: /* @__PURE__ */ jsx(
             IconButton,
@@ -621,7 +566,7 @@ function CollapsibleChat({ status, assistant }) {
             {
               className: classes.sidePaneRailChats,
               "aria-label": "AI chat conversations",
-              children: convState.conversations.map((conversation) => /* @__PURE__ */ jsx(
+              children: conversations.map((conversation) => /* @__PURE__ */ jsx(
                 Tooltip,
                 {
                   title: conversation.title,
@@ -630,16 +575,17 @@ function CollapsibleChat({ status, assistant }) {
                     IconButton,
                     {
                       size: "small",
-                      className: `${classes.sidePaneRailButton} ${conversation.id === convState.activeId ? classes.sidePaneRailButtonActive : ""}`,
+                      className: `${classes.sidePaneRailButton} ${conversation.id === activeId ? classes.sidePaneRailButtonActive : ""}`,
                       "aria-label": conversation.title,
-                      onClick: () => convState.selectConversation(conversation.id),
+                      onClick: () => handleSelect(conversation.id),
                       children: /* @__PURE__ */ jsx(
                         Badge,
                         {
-                          color: "error",
+                          color: conversation.generating ? "primary" : "error",
                           variant: "dot",
                           overlap: "circular",
-                          invisible: conversation.id === convState.activeId || !isConversationUnread(assistant.id, conversation.id),
+                          invisible: !conversation.generating && !conversation.unread,
+                          classes: conversation.generating ? { dot: classes.pulseDot } : void 0,
                           children: /* @__PURE__ */ jsx(ChatBubbleOutlineIcon, { fontSize: "small" })
                         }
                       )
@@ -658,67 +604,48 @@ function CollapsibleChat({ status, assistant }) {
         assistants: status.assistants,
         activeAssistantId: assistant.id,
         onSelectAssistant: handleSelectAssistant,
-        conversations: convState.conversations,
-        activeId: convState.activeId,
+        agentStatus,
+        conversations,
+        activeId,
         onNew: handleNew,
-        onSelect: convState.selectConversation,
-        onRename: convState.renameConversation,
-        onPin: convState.pinConversation,
-        onDelete: convState.deleteConversation,
+        onSelect: handleSelect,
+        onRename: handleRename,
+        onPin: handlePin,
+        onDelete: handleDelete,
         onCollapse: () => setSidePaneCollapsed(true)
       }
     ) }),
-    threads.map((d) => {
-      const isActive = d.agentId === assistant.id && d.convId === convState.activeId;
-      return /* @__PURE__ */ jsx(
-        ChatThread,
+    /* @__PURE__ */ jsxs("main", { className: classes.threadPane, "aria-label": "AI chat thread", children: [
+      /* @__PURE__ */ jsxs("div", { className: classes.threadHeader, children: [
+        /* @__PURE__ */ jsxs("div", { className: classes.threadIdentity, children: [
+          /* @__PURE__ */ jsx(AssistantAvatar, { color: assistant.color, size: 22 }),
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: classes.assistantName, children: assistant.title }),
+          activeTitle && /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              variant: "body2",
+              className: classes.threadTitle,
+              title: activeTitle,
+              children: [
+                "\xB7 ",
+                activeTitle
+              ]
+            }
+          )
+        ] }),
+        modelPicker
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: classes.threadBody, children: /* @__PURE__ */ jsx(
+        ConversationSurface,
         {
-          hidden: !isActive,
-          baseUrl: baseUrl.value,
-          authFetch: api.fetch,
-          assistantId: d.agentId,
-          modelId: isActive ? modelId : d.modelId,
-          title: isActive ? convState.activeConversation?.title ?? "" : "",
-          assistantName: isActive ? assistant.title : d.assistantTitle,
-          initialMessages: d.initialMessages,
-          onFinish: (messages) => handleThreadFinish(d, messages),
-          onRunningChange: (running) => setThreadRunning(d.convId, running),
-          composerPlaceholder: d.composerPlaceholder,
-          suggestions: d.suggestions,
-          assistantColor: isActive ? assistant.color : d.assistantColor,
-          headerRight: isActive ? modelPicker : void 0
-        },
-        d.convId
-      );
-    })
+          composerPlaceholder: assistant.ui?.composer?.placeholder,
+          suggestions: assistant.ui?.suggestions,
+          assistantColor: assistant.color
+        }
+      ) })
+    ] })
   ] }) }) });
 }
-function CollapsiblePage() {
-  const api = useApi(assistantsApiRef);
-  const [searchParams] = useSearchParams();
-  const requestedAssistant = searchParams.get("assistant");
-  const status = useAsync(() => api.getStatus(), [api]);
-  if (status.loading) {
-    return /* @__PURE__ */ jsx(Progress, {});
-  }
-  if (status.error) {
-    return /* @__PURE__ */ jsx(ResponseErrorPanel, { error: status.error });
-  }
-  if (!status.value) {
-    return null;
-  }
-  const assistants = status.value.assistants;
-  if (assistants.length === 0) {
-    return /* @__PURE__ */ jsx(
-      ResponseErrorPanel,
-      {
-        error: new Error("No assistants are available to you.")
-      }
-    );
-  }
-  const assistant = assistants.find((a) => a.id === requestedAssistant) ?? assistants[0];
-  return /* @__PURE__ */ jsx(CollapsibleChat, { status: status.value, assistant });
-}
 
 export { CollapsiblePage };
 //# sourceMappingURL=CollapsiblePage.esm.js.map