@flanksource/clicky-ui 0.3.46 → 0.3.47

package/dist/data/ai/ChatWindow.header.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../../lib/utils.cjs");
+const button = require("../../components/button.cjs");
+const Icon = require("../Icon.cjs");
+const ThreadPicker = require("./ThreadPicker.cjs");
+const ToolPreferences = require("./ToolPreferences.cjs");
+const UiArrowLeft = require("../../icons/components/UiArrowLeft.cjs");
+const UiGitBranch = require("../../icons/components/UiGitBranch.cjs");
+const UiAdd = require("../../icons/components/UiAdd.cjs");
+const UiFullscreen = require("../../icons/components/UiFullscreen.cjs");
+const UiClose = require("../../icons/components/UiClose.cjs");
+function ChatWindowHeader({
+  mobile,
+  title,
+  threadId,
+  maximized,
+  threadsSource,
+  sessionsApi,
+  titleRefresh,
+  headerExtras,
+  toolPreferences,
+  hasMessages,
+  forkDisabled,
+  onSelectThread,
+  onNewThread,
+  onFork,
+  onNewWindow,
+  onMaximize,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex items-center gap-1 border-b border-border bg-muted/40 px-2 py-1.5",
+        !mobile && "chat-drag-handle cursor-move"
+      ),
+      children: [
+        mobile && /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            title: "Back",
+            "aria-label": "Back",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowLeft.UiArrowLeft, className: "size-4" })
+          }
+        ),
+        threadsSource != null || sessionsApi !== null ? /* @__PURE__ */ jsxRuntime.jsx(
+          ThreadPicker.ThreadPicker,
+          {
+            threadId,
+            onSelect: onSelectThread,
+            onNew: onNewThread,
+            refreshToken: titleRefresh,
+            ...threadsSource ? { source: threadsSource } : sessionsApi !== null ? { api: sessionsApi } : {}
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 text-sm font-medium", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+        headerExtras,
+        /* @__PURE__ */ jsxRuntime.jsx(ToolPreferences.ToolPreferences, { ...toolPreferences }),
+        sessionsApi && /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            title: hasMessages ? "Fork conversation into a new window" : "Send a message before forking this conversation",
+            disabled: forkDisabled,
+            onClick: onFork,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiGitBranch.UiGitBranch, className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            title: "New window",
+            onClick: onNewWindow,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "size-4" })
+          }
+        ),
+        !mobile && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              title: maximized ? "Restore" : "Maximize",
+              onClick: onMaximize,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFullscreen.UiFullscreen, className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", title: "Close", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "size-4" }) })
+        ] })
+      ]
+    }
+  );
+}
+exports.ChatWindowHeader = ChatWindowHeader;
+//# sourceMappingURL=ChatWindow.header.cjs.map

package/dist/data/ai/ChatWindow.header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.header.cjs","sources":["../../../src/data/ai/ChatWindow.header.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon } from \"../Icon\";\nimport {\n  UiAdd,\n  UiArrowLeft,\n  UiClose,\n  UiFullscreen,\n  UiGitBranch,\n} from \"../../icons\";\nimport { ThreadPicker, type ThreadSource } from \"./ThreadPicker\";\nimport { ToolPreferences } from \"./ToolPreferences\";\n\nexport type ChatWindowHeaderProps = {\n  /** Below the mobile breakpoint: a back button replaces drag, maximize and close. */\n  mobile: boolean;\n  title: ReactNode;\n  threadId: string | null;\n  maximized: boolean;\n  threadsSource: ThreadSource | undefined;\n  sessionsApi: string | null;\n  /** Bumped when a turn settles so the picker re-reads the conversation name. */\n  titleRefresh: number;\n  headerExtras: ReactNode;\n  toolPreferences: ComponentProps<typeof ToolPreferences>;\n  hasMessages: boolean;\n  forkDisabled: boolean;\n  onSelectThread: (threadId: string) => void;\n  onNewThread: () => void;\n  onFork: () => void;\n  onNewWindow: () => void;\n  onMaximize: () => void;\n  onClose: () => void;\n};\n\n/** The chat window's drag-handle header: thread switcher (or title), host\n *  extras, tool/runtime preferences, fork, new window, and — off mobile —\n *  maximize and close. */\nexport function ChatWindowHeader({\n  mobile,\n  title,\n  threadId,\n  maximized,\n  threadsSource,\n  sessionsApi,\n  titleRefresh,\n  headerExtras,\n  toolPreferences,\n  hasMessages,\n  forkDisabled,\n  onSelectThread,\n  onNewThread,\n  onFork,\n  onNewWindow,\n  onMaximize,\n  onClose,\n}: ChatWindowHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1 border-b border-border bg-muted/40 px-2 py-1.5\",\n        !mobile && \"chat-drag-handle cursor-move\",\n      )}\n    >\n      {mobile && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          title=\"Back\"\n          aria-label=\"Back\"\n          onClick={onClose}\n        >\n          <Icon icon={UiArrowLeft} className=\"size-4\" />\n        </Button>\n      )}\n      {threadsSource != null || sessionsApi !== null ? (\n        <ThreadPicker\n          threadId={threadId}\n          onSelect={onSelectThread}\n          onNew={onNewThread}\n          refreshToken={titleRefresh}\n          {...(threadsSource\n            ? { source: threadsSource }\n            : sessionsApi !== null\n              ? { api: sessionsApi }\n              : {})}\n        />\n      ) : (\n        <span className=\"px-1 text-sm font-medium\">{title}</span>\n      )}\n      <div className=\"flex-1\" />\n      {headerExtras}\n      <ToolPreferences {...toolPreferences} />\n      {sessionsApi && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          title={\n            hasMessages\n              ? \"Fork conversation into a new window\"\n              : \"Send a message before forking this conversation\"\n          }\n          disabled={forkDisabled}\n          onClick={onFork}\n        >\n          <Icon icon={UiGitBranch} className=\"size-4\" />\n        </Button>\n      )}\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        title=\"New window\"\n        onClick={onNewWindow}\n      >\n        <Icon icon={UiAdd} className=\"size-4\" />\n      </Button>\n      {!mobile && (\n        <>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            title={maximized ? \"Restore\" : \"Maximize\"}\n            onClick={onMaximize}\n          >\n            <Icon icon={UiFullscreen} className=\"size-4\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" title=\"Close\" onClick={onClose}>\n            <Icon icon={UiClose} className=\"size-4\" />\n          </Button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","Button","Icon","UiArrowLeft","ThreadPicker","ToolPreferences","UiGitBranch","UiAdd","Fragment","UiFullscreen","UiClose"],"mappings":";;;;;;;;;;;;;AAuCO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,CAAC,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAA,UACCC,2BAAAA;AAAAA,UAACC,OAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,cAAW;AAAA,YACX,SAAS;AAAA,YAET,UAAAD,2BAAAA,IAACE,WAAA,EAAK,MAAMC,YAAAA,aAAa,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAG/C,iBAAiB,QAAQ,gBAAgB,OACxCH,2BAAAA;AAAAA,UAACI,aAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAU;AAAA,YACV,OAAO;AAAA,YACP,cAAc;AAAA,YACb,GAAI,gBACD,EAAE,QAAQ,cAAA,IACV,gBAAgB,OACd,EAAE,KAAK,gBACP,CAAA;AAAA,UAAC;AAAA,QAAA,IAGTJ,2BAAAA,IAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,OAAM;AAAA,QAEpDA,2BAAAA,IAAC,OAAA,EAAI,WAAU,SAAA,CAAS;AAAA,QACvB;AAAA,QACDA,2BAAAA,IAACK,gBAAAA,iBAAA,EAAiB,GAAG,iBAAiB;AAAA,QACrC,eACCL,2BAAAA;AAAAA,UAACC,OAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OACE,cACI,wCACA;AAAA,YAEN,UAAU;AAAA,YACV,SAAS;AAAA,YAET,UAAAD,2BAAAA,IAACE,WAAA,EAAK,MAAMI,YAAAA,aAAa,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhDN,2BAAAA;AAAAA,UAACC,OAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,SAAS;AAAA,YAET,UAAAD,2BAAAA,IAACE,WAAA,EAAK,MAAMK,MAAAA,OAAO,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEvC,CAAC,UACAT,2BAAAA,KAAAU,WAAAA,UAAA,EACE,UAAA;AAAA,UAAAR,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAO,YAAY,YAAY;AAAA,cAC/B,SAAS;AAAA,cAET,UAAAD,2BAAAA,IAACE,WAAA,EAAK,MAAMO,aAAAA,cAAc,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,yCAE9CR,OAAAA,QAAA,EAAO,SAAQ,SAAQ,MAAK,QAAO,OAAM,SAAQ,SAAS,SACzD,yCAACC,WAAA,EAAK,MAAMQ,iBAAS,WAAU,UAAS,EAAA,CAC1C;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/data/ai/ChatWindow.header.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ThreadSource } from './ThreadPicker.js';
+import { ToolPreferences } from './ToolPreferences.js';
+export type ChatWindowHeaderProps = {
+    /** Below the mobile breakpoint: a back button replaces drag, maximize and close. */
+    mobile: boolean;
+    title: ReactNode;
+    threadId: string | null;
+    maximized: boolean;
+    threadsSource: ThreadSource | undefined;
+    sessionsApi: string | null;
+    /** Bumped when a turn settles so the picker re-reads the conversation name. */
+    titleRefresh: number;
+    headerExtras: ReactNode;
+    toolPreferences: ComponentProps<typeof ToolPreferences>;
+    hasMessages: boolean;
+    forkDisabled: boolean;
+    onSelectThread: (threadId: string) => void;
+    onNewThread: () => void;
+    onFork: () => void;
+    onNewWindow: () => void;
+    onMaximize: () => void;
+    onClose: () => void;
+};
+/** The chat window's drag-handle header: thread switcher (or title), host
+ *  extras, tool/runtime preferences, fork, new window, and — off mobile —
+ *  maximize and close. */
+export declare function ChatWindowHeader({ mobile, title, threadId, maximized, threadsSource, sessionsApi, titleRefresh, headerExtras, toolPreferences, hasMessages, forkDisabled, onSelectThread, onNewThread, onFork, onNewWindow, onMaximize, onClose, }: ChatWindowHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=ChatWindow.header.d.ts.map

package/dist/data/ai/ChatWindow.header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.header.d.ts","sourceRoot":"","sources":["../../../src/data/ai/ChatWindow.header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvD,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,qBAAqB,GAAG;IAClC,oFAAoF;IACpF,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,+EAA+E;IAC/E,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,SAAS,CAAC;IACxB,eAAe,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;IACxD,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;0BAE0B;AAC1B,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,WAAW,EACX,YAAY,EACZ,cAAc,EACd,WAAW,EACX,MAAM,EACN,WAAW,EACX,UAAU,EACV,OAAO,GACR,EAAE,qBAAqB,+BA6EvB"}

package/dist/data/ai/ChatWindow.header.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../../components/button.js";
+import { Icon } from "../Icon.js";
+import { ThreadPicker } from "./ThreadPicker.js";
+import { ToolPreferences } from "./ToolPreferences.js";
+import { UiArrowLeft } from "../../icons/components/UiArrowLeft.js";
+import { UiGitBranch } from "../../icons/components/UiGitBranch.js";
+import { UiAdd } from "../../icons/components/UiAdd.js";
+import { UiFullscreen } from "../../icons/components/UiFullscreen.js";
+import { UiClose } from "../../icons/components/UiClose.js";
+function ChatWindowHeader({
+  mobile,
+  title,
+  threadId,
+  maximized,
+  threadsSource,
+  sessionsApi,
+  titleRefresh,
+  headerExtras,
+  toolPreferences,
+  hasMessages,
+  forkDisabled,
+  onSelectThread,
+  onNewThread,
+  onFork,
+  onNewWindow,
+  onMaximize,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1 border-b border-border bg-muted/40 px-2 py-1.5",
+        !mobile && "chat-drag-handle cursor-move"
+      ),
+      children: [
+        mobile && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            title: "Back",
+            "aria-label": "Back",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(Icon, { icon: UiArrowLeft, className: "size-4" })
+          }
+        ),
+        threadsSource != null || sessionsApi !== null ? /* @__PURE__ */ jsx(
+          ThreadPicker,
+          {
+            threadId,
+            onSelect: onSelectThread,
+            onNew: onNewThread,
+            refreshToken: titleRefresh,
+            ...threadsSource ? { source: threadsSource } : sessionsApi !== null ? { api: sessionsApi } : {}
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "px-1 text-sm font-medium", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        headerExtras,
+        /* @__PURE__ */ jsx(ToolPreferences, { ...toolPreferences }),
+        sessionsApi && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            title: hasMessages ? "Fork conversation into a new window" : "Send a message before forking this conversation",
+            disabled: forkDisabled,
+            onClick: onFork,
+            children: /* @__PURE__ */ jsx(Icon, { icon: UiGitBranch, className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            title: "New window",
+            onClick: onNewWindow,
+            children: /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "size-4" })
+          }
+        ),
+        !mobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              title: maximized ? "Restore" : "Maximize",
+              onClick: onMaximize,
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiFullscreen, className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", title: "Close", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "size-4" }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ChatWindowHeader
+};
+//# sourceMappingURL=ChatWindow.header.js.map

package/dist/data/ai/ChatWindow.header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.header.js","sources":["../../../src/data/ai/ChatWindow.header.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon } from \"../Icon\";\nimport {\n  UiAdd,\n  UiArrowLeft,\n  UiClose,\n  UiFullscreen,\n  UiGitBranch,\n} from \"../../icons\";\nimport { ThreadPicker, type ThreadSource } from \"./ThreadPicker\";\nimport { ToolPreferences } from \"./ToolPreferences\";\n\nexport type ChatWindowHeaderProps = {\n  /** Below the mobile breakpoint: a back button replaces drag, maximize and close. */\n  mobile: boolean;\n  title: ReactNode;\n  threadId: string | null;\n  maximized: boolean;\n  threadsSource: ThreadSource | undefined;\n  sessionsApi: string | null;\n  /** Bumped when a turn settles so the picker re-reads the conversation name. */\n  titleRefresh: number;\n  headerExtras: ReactNode;\n  toolPreferences: ComponentProps<typeof ToolPreferences>;\n  hasMessages: boolean;\n  forkDisabled: boolean;\n  onSelectThread: (threadId: string) => void;\n  onNewThread: () => void;\n  onFork: () => void;\n  onNewWindow: () => void;\n  onMaximize: () => void;\n  onClose: () => void;\n};\n\n/** The chat window's drag-handle header: thread switcher (or title), host\n *  extras, tool/runtime preferences, fork, new window, and — off mobile —\n *  maximize and close. */\nexport function ChatWindowHeader({\n  mobile,\n  title,\n  threadId,\n  maximized,\n  threadsSource,\n  sessionsApi,\n  titleRefresh,\n  headerExtras,\n  toolPreferences,\n  hasMessages,\n  forkDisabled,\n  onSelectThread,\n  onNewThread,\n  onFork,\n  onNewWindow,\n  onMaximize,\n  onClose,\n}: ChatWindowHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1 border-b border-border bg-muted/40 px-2 py-1.5\",\n        !mobile && \"chat-drag-handle cursor-move\",\n      )}\n    >\n      {mobile && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          title=\"Back\"\n          aria-label=\"Back\"\n          onClick={onClose}\n        >\n          <Icon icon={UiArrowLeft} className=\"size-4\" />\n        </Button>\n      )}\n      {threadsSource != null || sessionsApi !== null ? (\n        <ThreadPicker\n          threadId={threadId}\n          onSelect={onSelectThread}\n          onNew={onNewThread}\n          refreshToken={titleRefresh}\n          {...(threadsSource\n            ? { source: threadsSource }\n            : sessionsApi !== null\n              ? { api: sessionsApi }\n              : {})}\n        />\n      ) : (\n        <span className=\"px-1 text-sm font-medium\">{title}</span>\n      )}\n      <div className=\"flex-1\" />\n      {headerExtras}\n      <ToolPreferences {...toolPreferences} />\n      {sessionsApi && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          title={\n            hasMessages\n              ? \"Fork conversation into a new window\"\n              : \"Send a message before forking this conversation\"\n          }\n          disabled={forkDisabled}\n          onClick={onFork}\n        >\n          <Icon icon={UiGitBranch} className=\"size-4\" />\n        </Button>\n      )}\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        title=\"New window\"\n        onClick={onNewWindow}\n      >\n        <Icon icon={UiAdd} className=\"size-4\" />\n      </Button>\n      {!mobile && (\n        <>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            title={maximized ? \"Restore\" : \"Maximize\"}\n            onClick={onMaximize}\n          >\n            <Icon icon={UiFullscreen} className=\"size-4\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" title=\"Close\" onClick={onClose}>\n            <Icon icon={UiClose} className=\"size-4\" />\n          </Button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuCO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,CAAC,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAA,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,cAAW;AAAA,YACX,SAAS;AAAA,YAET,UAAA,oBAAC,MAAA,EAAK,MAAM,aAAa,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAG/C,iBAAiB,QAAQ,gBAAgB,OACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAU;AAAA,YACV,OAAO;AAAA,YACP,cAAc;AAAA,YACb,GAAI,gBACD,EAAE,QAAQ,cAAA,IACV,gBAAgB,OACd,EAAE,KAAK,gBACP,CAAA;AAAA,UAAC;AAAA,QAAA,IAGT,oBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,OAAM;AAAA,QAEpD,oBAAC,OAAA,EAAI,WAAU,SAAA,CAAS;AAAA,QACvB;AAAA,QACD,oBAAC,iBAAA,EAAiB,GAAG,iBAAiB;AAAA,QACrC,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OACE,cACI,wCACA;AAAA,YAEN,UAAU;AAAA,YACV,SAAS;AAAA,YAET,UAAA,oBAAC,MAAA,EAAK,MAAM,aAAa,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,SAAS;AAAA,YAET,UAAA,oBAAC,MAAA,EAAK,MAAM,OAAO,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEvC,CAAC,UACA,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAO,YAAY,YAAY;AAAA,cAC/B,SAAS;AAAA,cAET,UAAA,oBAAC,MAAA,EAAK,MAAM,cAAc,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,8BAE9C,QAAA,EAAO,SAAQ,SAAQ,MAAK,QAAO,OAAM,SAAQ,SAAS,SACzD,8BAAC,MAAA,EAAK,MAAM,SAAS,WAAU,UAAS,EAAA,CAC1C;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/data/ai/ChatWindow.js

@@ -1,14 +1,12 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { cn } from "../../lib/utils.js";
-import { Button } from "../../components/button.js";
-import { Icon } from "../Icon.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
 import { Chat } from "../chat/Chat.js";
 import { forkChatSession } from "../chat/approval.js";
 import { useChatWindowManager } from "./chat-window-context.js";
-import { ThreadPicker } from "./ThreadPicker.js";
+import { ChatWindowHeader } from "./ChatWindow.header.js";
 import { ContextBadges } from "./ContextBadges.js";
-import { ToolPreferences } from "./ToolPreferences.js";
 import { chatWindowRequestBody } from "./ChatWindowRequestBody.js";
 import { loadChatPreferences, saveChatPreferences } from "./ChatWindow.preferences.js";
 import { useChatWindowRuntime } from "./ChatWindow.runtime.js";
@@ -17,19 +15,8 @@ import { normalizeToolCatalog } from "./ChatWindow.tool-catalog.js";
 import { effectiveToolPolicies, withUserRule } from "./ToolPreferences.model.js";
 import { useChatThreadSetup } from "./ChatWindow.thread.js";
 import { ChatThreadSetupStatus } from "./ChatWindow.thread-status.js";
-import { UiGitBranch } from "../../icons/components/UiGitBranch.js";
-import { UiAdd } from "../../icons/components/UiAdd.js";
-import { UiFullscreen } from "../../icons/components/UiFullscreen.js";
-import { UiClose } from "../../icons/components/UiClose.js";
+import { CHAT_WINDOW_MOBILE_QUERY, ChatWindowSheet, ChatWindowFloating } from "./ChatWindow.placement.js";
 const EMPTY_TOOLS = [];
-const MAXIMIZE_CSS = `
-.chat-maximized .react-draggable {
-  transform: none !important;
-  width: auto !important;
-  height: auto !important;
-  inset: 0 !important;
-  position: absolute !important;
-}`;
 function ChatWindow({
   panel,
   chat,
@@ -46,7 +33,15 @@ function ChatWindow({
   renderContextPicker
 }) {
   var _a;
-  const { updatePanel, closePanel, bringToFront, maximizePanel, openPanel } = useChatWindowManager();
+  const {
+    panels,
+    updatePanel,
+    closePanel,
+    bringToFront,
+    maximizePanel,
+    openPanel
+  } = useChatWindowManager();
+  const mobile = useMediaQuery(CHAT_WINDOW_MOBILE_QUERY);
   const threadSetup = useChatThreadSetup({
     threadId: panel.threadId,
     api: sessionsApi,
@@ -163,6 +158,7 @@ function ChatWindow({
     setUserToolRules((prev) => withUserRule(prev, rule));
   }, []);
   useEffect(() => {
+    if (mobile) return;
     let active = true;
     import("react-rnd").then((m) => {
       if (active) setRnd(() => m.Rnd);
@@ -170,7 +166,7 @@ function ChatWindow({
     return () => {
       active = false;
     };
-  }, []);
+  }, [mobile]);
   const removeContext = useCallback(
     (id) => updatePanel(panel.id, {
       contextItems: panel.contextItems.filter((c) => c.id !== id)
@@ -263,22 +259,18 @@ function ChatWindow({
       setForking(false);
     }
   }, [forking, messageCount, openPanel, panel.threadId, sessionsApi]);
-  const header = /* @__PURE__ */ jsxs("div", { className: "chat-drag-handle flex cursor-move items-center gap-1 border-b border-border bg-muted/40 px-2 py-1.5", children: [
-    threadsSource != null || sessionsApi !== null ? /* @__PURE__ */ jsx(
-      ThreadPicker,
-      {
-        threadId: panel.threadId,
-        onSelect: (tid) => updatePanel(panel.id, { threadId: tid }),
-        onNew: () => updatePanel(panel.id, { threadId: null }),
-        refreshToken: titleRefresh,
-        ...threadsSource ? { source: threadsSource } : sessionsApi !== null ? { api: sessionsApi } : {}
-      }
-    ) : /* @__PURE__ */ jsx("span", { className: "px-1 text-sm font-medium", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-    headerExtras,
-    /* @__PURE__ */ jsx(
-      ToolPreferences,
-      {
+  const header = /* @__PURE__ */ jsx(
+    ChatWindowHeader,
+    {
+      mobile,
+      title,
+      threadId: panel.threadId,
+      maximized: panel.maximized,
+      threadsSource,
+      sessionsApi,
+      titleRefresh,
+      headerExtras,
+      toolPreferences: {
         tools: resolvedTools,
         value: toolPrefs,
         onRule: handleToolRule,
@@ -301,153 +293,96 @@ function ChatWindow({
         catalogLoading,
         catalogError,
         onCatalogRetry: retryCatalogs
-      }
-    ),
-    sessionsApi && /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        title: messageCount === 0 ? "Send a message before forking this conversation" : "Fork conversation into a new window",
-        disabled: !panel.threadId || messageCount === 0 || forking,
-        onClick: () => void handleFork(),
-        children: /* @__PURE__ */ jsx(Icon, { icon: UiGitBranch, className: "size-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        title: "New window",
-        onClick: () => openPanel(),
-        children: /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "size-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        title: panel.maximized ? "Restore" : "Maximize",
-        onClick: () => maximizePanel(panel.id),
-        children: /* @__PURE__ */ jsx(Icon, { icon: UiFullscreen, className: "size-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        title: "Close",
-        onClick: () => closePanel(panel.id),
-        children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "size-4" })
-      }
-    )
-  ] });
-  const frame = /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl", children: [
-    header,
-    (renderContextPicker || panel.contextItems.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 border-b border-border px-2 py-1.5", children: [
-      renderContextPicker == null ? void 0 : renderContextPicker({
-        items: panel.contextItems,
-        onAdd: addContext,
-        onAddMany: addContextItems
-      }),
-      /* @__PURE__ */ jsx(
-        ContextBadges,
-        {
-          items: panel.contextItems,
-          onRemove: removeContext,
-          className: "px-0 py-0",
-          ...contextTypeConfig ? { typeConfig: contextTypeConfig } : {}
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: threadSetup.blocked ? /* @__PURE__ */ jsx(ChatThreadSetupStatus, { setup: threadSetup }) : /* @__PURE__ */ jsx(
-      Chat,
-      {
-        ...chat,
-        ...resolvedModels.length ? { models: resolvedModels, modelsApi: null } : {},
-        runtime,
-        ...runtimeFamilies ? { runtimeFamilies } : {},
-        permissionMode,
-        onRuntimeChange: handleRuntimeChange,
-        onModelChange: handleModelChange,
-        onReasoningEffortChange: handleReasoningEffortChange,
-        budget,
-        onUsage: handleUsage,
-        runtimeLocked,
-        onMessageCountChange: handleMessageCountChange,
-        onSessionHydrated: handleSessionHydrated,
-        ...panel.threadId ? { threadId: panel.threadId } : {},
-        sessionsApi,
-        tools: resolvedTools,
-        ...toolRenderers ? { toolRenderers } : {},
-        body: mergedBody,
-        initialPrompt,
-        onInitialPromptConsumed: handleInitialPromptConsumed,
-        proposedPrompts,
-        onProposedPromptsConsumed: handleProposedPromptsConsumed
       },
-      panel.threadId ?? `new-${panel.id}`
-    ) })
-  ] });
-  const outerClass = cn(
-    "fixed pointer-events-none",
-    panel.maximized ? "inset-4 chat-maximized" : "inset-0"
+      hasMessages: messageCount > 0,
+      forkDisabled: !panel.threadId || messageCount === 0 || forking,
+      onSelectThread: (threadId) => updatePanel(panel.id, { threadId }),
+      onNewThread: () => updatePanel(panel.id, { threadId: null }),
+      onFork: () => void handleFork(),
+      onNewWindow: () => openPanel(),
+      onMaximize: () => maximizePanel(panel.id),
+      onClose: () => closePanel(panel.id)
+    }
   );
-  if (!Rnd) {
-    return /* @__PURE__ */ jsx("div", { className: outerClass, style: { zIndex: panel.zIndex }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "pointer-events-auto h-full",
-        style: panel.maximized ? { position: "relative", width: "100%", height: "100%" } : {
-          position: "absolute",
-          left: panel.x,
-          top: panel.y,
-          width: panel.width,
-          height: panel.height
-        },
-        children: frame
-      }
-    ) });
+  const frame = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full flex-col overflow-hidden bg-background",
+        !mobile && "rounded-lg border border-border shadow-xl"
+      ),
+      children: [
+        header,
+        (renderContextPicker || panel.contextItems.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 border-b border-border px-2 py-1.5", children: [
+          renderContextPicker == null ? void 0 : renderContextPicker({
+            items: panel.contextItems,
+            onAdd: addContext,
+            onAddMany: addContextItems
+          }),
+          /* @__PURE__ */ jsx(
+            ContextBadges,
+            {
+              items: panel.contextItems,
+              onRemove: removeContext,
+              className: "px-0 py-0",
+              ...contextTypeConfig ? { typeConfig: contextTypeConfig } : {}
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: threadSetup.blocked ? /* @__PURE__ */ jsx(ChatThreadSetupStatus, { setup: threadSetup }) : /* @__PURE__ */ jsx(
+          Chat,
+          {
+            ...chat,
+            ...resolvedModels.length ? { models: resolvedModels, modelsApi: null } : {},
+            runtime,
+            ...runtimeFamilies ? { runtimeFamilies } : {},
+            permissionMode,
+            onRuntimeChange: handleRuntimeChange,
+            onModelChange: handleModelChange,
+            onReasoningEffortChange: handleReasoningEffortChange,
+            budget,
+            onUsage: handleUsage,
+            runtimeLocked,
+            onMessageCountChange: handleMessageCountChange,
+            onSessionHydrated: handleSessionHydrated,
+            ...panel.threadId ? { threadId: panel.threadId } : {},
+            sessionsApi,
+            tools: resolvedTools,
+            ...toolRenderers ? { toolRenderers } : {},
+            body: mergedBody,
+            initialPrompt,
+            onInitialPromptConsumed: handleInitialPromptConsumed,
+            proposedPrompts,
+            onProposedPromptsConsumed: handleProposedPromptsConsumed
+          },
+          panel.threadId ?? `new-${panel.id}`
+        ) })
+      ]
+    }
+  );
+  const layerStyle = { zIndex: panel.zIndex };
+  if (mobile) {
+    const front = panels.reduce((top, p) => p.zIndex >= top.zIndex ? p : top);
+    return /* @__PURE__ */ jsx(ChatWindowSheet, { layerStyle, hidden: front.id !== panel.id, children: frame });
   }
-  return /* @__PURE__ */ jsxs("div", { className: outerClass, style: { zIndex: panel.zIndex }, children: [
-    /* @__PURE__ */ jsx("style", { children: MAXIMIZE_CSS }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    ChatWindowFloating,
+    {
+      panel,
+      layerStyle,
       Rnd,
-      {
-        default: {
-          x: panel.x,
-          y: panel.y,
-          width: panel.width,
-          height: panel.height
-        },
-        style: { pointerEvents: "auto" },
-        minWidth: Math.min(360, Math.max(1, window.innerWidth - 32)),
-        minHeight: Math.min(400, Math.max(1, window.innerHeight - 32)),
-        bounds: "parent",
-        dragHandleClassName: "chat-drag-handle",
-        disableDragging: panel.maximized,
-        enableResizing: !panel.maximized,
-        onDragStart: () => bringToFront(panel.id),
-        onDragStop: (_e, d) => updatePanel(panel.id, { x: d.x, y: d.y }),
-        onResizeStop: (_e, _dir, ref, _delta, pos) => updatePanel(panel.id, {
-          width: ref.offsetWidth,
-          height: ref.offsetHeight,
-          x: pos.x,
-          y: pos.y
-        }),
-        children: frame
-      }
-    )
-  ] });
+      onDragStart: () => bringToFront(panel.id),
+      onGeometryChange: (partial) => updatePanel(panel.id, partial),
+      children: frame
+    }
+  );
 }
 function ChatWindowLayer(props) {
   const { panels } = useChatWindowManager();
   return /* @__PURE__ */ jsx(Fragment, { children: panels.map((panel) => /* @__PURE__ */ jsx(ChatWindow, { panel, ...props }, panel.id)) });
 }
 export {
+  CHAT_WINDOW_MOBILE_QUERY,
   ChatWindow,
   ChatWindowLayer
 };