@drewswiredin/backstage-plugin-assistants 0.1.0

package/dist/collapsible/CollapsiblePage.esm.js

@@ -0,0 +1,724 @@
+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 { useSearchParams } from 'react-router-dom';
+import useAsync from 'react-use/lib/useAsync';
+import { useApi } from '@backstage/core-plugin-api';
+import { Progress, ResponseErrorPanel, Content } from '@backstage/core-components';
+import { makeStyles } from '@material-ui/core/styles';
+import { FormControl, Select, ListSubheader, MenuItem, ListItemIcon, Tooltip, IconButton, Badge, Typography } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+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 { 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';
+
+const SIDEPANE_COLLAPSED_KEY = "ai-chat-sidepane-collapsed";
+function loadSidePaneCollapsed() {
+  try {
+    return localStorage.getItem(SIDEPANE_COLLAPSED_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+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,
+    display: "flex",
+    flexDirection: "column"
+  },
+  shell: {
+    display: "flex",
+    flex: 1,
+    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),
+    paddingLeft: 0,
+    gap: theme.spacing(1)
+  },
+  sidePane: {
+    width: 320,
+    flexShrink: 0,
+    minHeight: 0,
+    overflowY: "auto",
+    overflowX: "hidden"
+  },
+  sidePaneRail: {
+    width: 56,
+    flexShrink: 0,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    paddingBottom: theme.spacing(0.5),
+    borderRight: `1px solid ${theme.palette.divider}`,
+    overflow: "hidden"
+  },
+  sidePaneRailHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    minHeight: 44,
+    flexShrink: 0,
+    borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  sidePaneRailAssistants: {
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    paddingTop: theme.spacing(0.75)
+  },
+  sidePaneRailDivider: {
+    flexShrink: 0,
+    width: 24,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    margin: theme.spacing(0.75, 0)
+  },
+  sidePaneRailControls: {
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    paddingBottom: theme.spacing(1)
+  },
+  sidePaneRailChats: {
+    flex: 1,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    overflowY: "auto",
+    overflowX: "hidden"
+  },
+  sidePaneRailButton: {
+    color: theme.palette.text.secondary
+  },
+  sidePaneRailButtonActive: {
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.action.selected,
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    }
+  },
+  threadPane: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    minWidth: 0,
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[1],
+    overflow: "hidden"
+  },
+  // Slim, solid header.
+  threadHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(2),
+    minHeight: 36,
+    padding: theme.spacing(0, 2),
+    backgroundColor: theme.palette.background.paper,
+    borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  threadIdentity: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    minWidth: 0,
+    flex: 1
+  },
+  assistantName: {
+    fontWeight: 600,
+    color: theme.palette.text.primary,
+    whiteSpace: "nowrap",
+    flexShrink: 0
+  },
+  threadTitle: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: theme.palette.text.secondary
+  },
+  modelSelect: {
+    fontSize: theme.typography.caption.fontSize,
+    color: theme.palette.text.secondary,
+    borderRadius: 999,
+    transition: theme.transitions.create("background-color"),
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    },
+    "& .MuiSelect-select": {
+      display: "flex",
+      alignItems: "center",
+      borderRadius: 999,
+      paddingTop: theme.spacing(0.5),
+      paddingBottom: theme.spacing(0.5),
+      paddingLeft: theme.spacing(1.25),
+      paddingRight: theme.spacing(3),
+      "&:focus": {
+        backgroundColor: "transparent",
+        borderRadius: 999
+      }
+    },
+    "& .MuiSelect-icon": {
+      color: theme.palette.text.secondary,
+      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,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    color: theme.palette.text.secondary,
+    backgroundColor: theme.palette.background.paper
+  },
+  modelItem: {
+    paddingTop: theme.spacing(0.75),
+    paddingBottom: theme.spacing(0.75)
+  },
+  modelItemCheck: {
+    minWidth: theme.spacing(3.5),
+    color: theme.palette.primary.main
+  },
+  modelDefaultStar: {
+    fontSize: "1rem",
+    color: theme.palette.warning.main,
+    marginLeft: theme.spacing(1)
+  },
+  threadBody: {
+    flex: 1,
+    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"
+  }
+}));
+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;
+  const slash = raw.indexOf("/");
+  if (slash !== -1) {
+    return { vendor: raw.slice(0, slash), name: raw.slice(slash + 1) };
+  }
+  return { vendor: opt?.provider ?? "models", name: raw };
+}
+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
+}) {
+  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",
+      {
+        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
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function useLiveThreads(active) {
+  const [mounted, setMounted] = useState([]);
+  const [running, setRunning] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  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 };
+}
+function CollapsibleChat({ status, assistant }) {
+  const classes = useStyles();
+  const api = useApi(assistantsApiRef);
+  useUnreadVersion();
+  const [, setSearchParams] = useSearchParams();
+  const handleSelectAssistant = useCallback(
+    (id) => {
+      if (id !== assistant.id) {
+        setSearchParams({ assistant: id });
+      }
+    },
+    [assistant.id, setSearchParams]
+  );
+  const baseUrl = useAsync(() => api.getBaseUrl(), [api]);
+  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]);
+      }
+    }
+    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)
+  );
+  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
+  );
+  useEffect(() => {
+    try {
+      localStorage.setItem(SIDEPANE_COLLAPSED_KEY, String(sidePaneCollapsed));
+    } catch {
+    }
+  }, [sidePaneCollapsed]);
+  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
+        );
+      }
+      if (!viewing) {
+        markUnread(descriptor.agentId, descriptor.convId);
+      }
+      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, assistant.id, convState]
+  );
+  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,
+    {
+      value: modelId,
+      onChange: (e) => handleModelChange(e.target.value),
+      disableUnderline: true,
+      className: classes.modelSelect,
+      inputProps: { "aria-label": "Model" },
+      renderValue: (value) => modelLabel(value, status.models),
+      MenuProps: {
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        getContentAnchorEl: null
+      },
+      children: modelGroups.flatMap(([vendor, ids]) => [
+        /* @__PURE__ */ jsx(
+          ListSubheader,
+          {
+            disableSticky: true,
+            className: classes.modelGroupLabel,
+            children: vendor
+          },
+          `group-${vendor}`
+        ),
+        ...ids.map((id) => /* @__PURE__ */ jsxs(MenuItem, { value: id, className: classes.modelItem, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { className: classes.modelItemCheck, children: id === modelId ? /* @__PURE__ */ jsx(CheckIcon, { fontSize: "small" }) : null }),
+          /* @__PURE__ */ jsx("span", { style: { flexGrow: 1 }, children: modelLabel(id, status.models) }),
+          id === defaultModel && /* @__PURE__ */ jsx(Tooltip, { title: "Assistant default", children: /* @__PURE__ */ jsx(
+            StarIcon,
+            {
+              className: classes.modelDefaultStar,
+              "aria-label": "Assistant default"
+            }
+          ) })
+        ] }, id))
+      ])
+    }
+  ) });
+  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",
+      {
+        className: classes.sidePaneRail,
+        "aria-label": "AI chat sidebar collapsed",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: classes.sidePaneRailHeader, children: /* @__PURE__ */ jsx(Tooltip, { title: "Expand", placement: "right", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              className: classes.sidePaneRailButton,
+              "aria-label": "Expand AI chat sidebar",
+              onClick: () => setSidePaneCollapsed(false),
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" })
+            }
+          ) }) }),
+          /* @__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,
+                {
+                  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 })
+                    }
+                  )
+                }
+              ) }, 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,
+            {
+              size: "small",
+              className: classes.sidePaneRailButton,
+              "aria-label": "New Chat",
+              onClick: handleNew,
+              children: /* @__PURE__ */ jsx(AddIcon, { fontSize: "small" })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(
+            "nav",
+            {
+              className: classes.sidePaneRailChats,
+              "aria-label": "AI chat conversations",
+              children: convState.conversations.map((conversation) => /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  title: conversation.title,
+                  placement: "right",
+                  children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      className: `${classes.sidePaneRailButton} ${conversation.id === convState.activeId ? classes.sidePaneRailButtonActive : ""}`,
+                      "aria-label": conversation.title,
+                      onClick: () => convState.selectConversation(conversation.id),
+                      children: /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          color: "error",
+                          variant: "dot",
+                          overlap: "circular",
+                          invisible: conversation.id === convState.activeId || !isConversationUnread(assistant.id, conversation.id),
+                          children: /* @__PURE__ */ jsx(ChatBubbleOutlineIcon, { fontSize: "small" })
+                        }
+                      )
+                    }
+                  )
+                },
+                conversation.id
+              ))
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("aside", { className: classes.sidePane, "aria-label": "AI chat sidepane", children: /* @__PURE__ */ jsx(
+      SidePane,
+      {
+        assistants: status.assistants,
+        activeAssistantId: assistant.id,
+        onSelectAssistant: handleSelectAssistant,
+        conversations: convState.conversations,
+        activeId: convState.activeId,
+        onNew: handleNew,
+        onSelect: convState.selectConversation,
+        onRename: convState.renameConversation,
+        onPin: convState.pinConversation,
+        onDelete: convState.deleteConversation,
+        onCollapse: () => setSidePaneCollapsed(true)
+      }
+    ) }),
+    threads.map((d) => {
+      const isActive = d.agentId === assistant.id && d.convId === convState.activeId;
+      return /* @__PURE__ */ jsx(
+        ChatThread,
+        {
+          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
+      );
+    })
+  ] }) }) });
+}
+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