Redesign Shell sidebar collapse, refactor Composer, and add Portal primitive

packages/react-ui/package.json

@@ -76,6 +76,7 @@
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-select": "^2.1.5",
     "@radix-ui/react-separator": "^1.1.7",

packages/react-ui/src/components/BottomTray/Thread.tsx

@@ -1,11 +1,8 @@
 import type { AssistantMessage, Message, ToolMessage } from "@openuidev/react-headless";
 import { MessageProvider, useThread } from "@openuidev/react-headless";
 import clsx from "clsx";
-import { ArrowUp, Square } from "lucide-react";
-import React, { memo, useEffect, useLayoutEffect, useRef } from "react";
-import { useComposerState } from "../../hooks/useComposerState";
+import React, { memo, useEffect, useRef } from "react";
 import { ScrollVariant, useScrollToBottom } from "../../hooks/useScrollToBottom";
-import { IconButton } from "../IconButton";
 import { MarkDownRenderer } from "../MarkDownRenderer";
 import { MessageLoading as MessageLoadingComponent } from "../MessageLoading";
 import type { AssistantMessageComponent, UserMessageComponent } from "../OpenUIChat/types";
@@ -292,59 +289,5 @@ export const Messages = ({
   );
 };
 
-export const Composer = ({ className }: { className?: string }) => {
-  const { textContent, setTextContent } = useComposerState();
-  const processMessage = useThread((s) => s.processMessage);
-  const cancelMessage = useThread((s) => s.cancelMessage);
-  const isRunning = useThread((s) => s.isRunning);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleSubmit = () => {
-    if (!textContent.trim() || isRunning) {
-      return;
-    }
-
-    processMessage({
-      role: "user",
-      content: textContent,
-    });
-
-    setTextContent("");
-  };
-
-  useLayoutEffect(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-
-    input.style.height = "auto";
-    input.style.height = `${input.scrollHeight}px`;
-  }, [textContent]);
-
-  return (
-    <div className={clsx("openui-bottom-tray-thread-composer", className)}>
-      <div className="openui-bottom-tray-thread-composer__input-wrapper">
-        <textarea
-          ref={inputRef}
-          rows={1}
-          value={textContent}
-          autoFocus
-          onChange={(e) => setTextContent(e.target.value)}
-          className="openui-bottom-tray-thread-composer__input"
-          placeholder="Type your message..."
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSubmit();
-            }
-          }}
-        />
-        <IconButton
-          onClick={isRunning ? cancelMessage : handleSubmit}
-          icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-        />
-      </div>
-    </div>
-  );
-};
+// Re-export Composer from components
+export { Composer } from "./components";

packages/react-ui/src/components/BottomTray/bottomTray.scss

@@ -6,5 +6,6 @@
 @use "./header.scss";
 @use "./threadList.scss";
 @use "./thread.scss";
+@use "./components/composer.scss";
 @use "./conversationStarter.scss";
 @use "./welcomeScreen.scss";

packages/react-ui/src/components/BottomTray/components/Composer.tsx

@@ -0,0 +1,81 @@
+import { useThread } from "@openuidev/react-headless";
+import clsx from "clsx";
+import { ArrowUp, Square } from "lucide-react";
+import { useLayoutEffect, useRef } from "react";
+import { useComposerState } from "../../../hooks/useComposerState";
+import { IconButton } from "../../IconButton";
+
+export interface ComposerProps {
+  className?: string;
+  placeholder?: string;
+}
+
+export const Composer = ({ className, placeholder = "Type your message..." }: ComposerProps) => {
+  const { textContent, setTextContent } = useComposerState();
+  const processMessage = useThread((s) => s.processMessage);
+  const cancelMessage = useThread((s) => s.cancelMessage);
+  const isRunning = useThread((s) => s.isRunning);
+  const isLoadingMessages = useThread((s) => s.isLoadingMessages);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSubmit = () => {
+    if (!textContent.trim() || isRunning || isLoadingMessages) {
+      return;
+    }
+
+    processMessage({
+      role: "user",
+      content: textContent,
+    });
+
+    setTextContent("");
+  };
+
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    // Reset to 0 (not "auto") so scrollHeight reflects content, not container
+    input.style.height = "0px";
+    input.style.height = `${Math.max(input.scrollHeight, 24)}px`;
+  }, [textContent]);
+
+  return (
+    <div
+      className={clsx("openui-bottom-tray-thread-composer", className)}
+      onClick={(e) => {
+        if (!(e.target as HTMLElement).closest("button, a, [role='button']")) {
+          inputRef.current?.focus();
+        }
+      }}
+    >
+      <div className="openui-bottom-tray-thread-composer__input-wrapper">
+        <textarea
+          ref={inputRef}
+          value={textContent}
+          onChange={(e) => setTextContent(e.target.value)}
+          className="openui-bottom-tray-thread-composer__input"
+          placeholder={placeholder}
+          rows={1}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }}
+        />
+        <div className="openui-bottom-tray-thread-composer__action-bar">
+          <IconButton
+            onClick={isRunning ? cancelMessage : handleSubmit}
+            icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
+            size="medium"
+            variant="primary"
+            className="openui-bottom-tray-thread-composer__submit-button"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Composer;

packages/react-ui/src/components/BottomTray/components/composer.scss

@@ -0,0 +1,59 @@
+@use "../../../cssUtils" as cssUtils;
+
+.openui-bottom-tray-thread-composer {
+  width: 100%;
+  padding: 0 cssUtils.$space-s cssUtils.$space-s;
+
+  &__input-wrapper {
+    background-color: cssUtils.$foreground;
+    border: 1px solid cssUtils.$border-interactive;
+    border-radius: cssUtils.$radius-l;
+    box-shadow: cssUtils.$shadow-s;
+    overflow: clip;
+    display: flex;
+    flex-direction: column;
+    gap: cssUtils.$space-s;
+    padding: cssUtils.$space-s;
+  }
+
+  &__input {
+    scrollbar-width: thin;
+    scrollbar-color: cssUtils.$elevated transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: cssUtils.$elevated;
+      border-radius: cssUtils.$radius-full;
+    }
+
+    padding: 0 cssUtils.$space-3xs;
+    resize: none;
+    max-height: 200px;
+    outline: none;
+    border: none;
+    background: transparent;
+    overflow-y: auto;
+    @include cssUtils.typography(body, default);
+    color: cssUtils.$text-neutral-primary;
+
+    &::placeholder {
+      color: cssUtils.$text-neutral-secondary;
+    }
+  }
+
+  &__action-bar {
+    display: flex;
+    align-items: center;
+  }
+
+  &__submit-button {
+    margin-left: auto;
+  }
+}

packages/react-ui/src/components/BottomTray/components/index.ts

@@ -0,0 +1,2 @@
+export { Composer } from "./Composer";
+export type { ComposerProps } from "./Composer";

packages/react-ui/src/components/BottomTray/thread.scss

@@ -101,37 +101,3 @@
     height: fit-content;
   }
 }
-
-.openui-bottom-tray-thread-composer {
-  width: 100%;
-  padding: 0 cssUtils.$space-s cssUtils.$space-s;
-
-  &__input-wrapper {
-    background-color: cssUtils.$foreground;
-    border: 1.256px solid cssUtils.$border-default;
-    display: flex;
-    align-items: flex-end;
-    gap: cssUtils.$space-s;
-    padding: cssUtils.$space-m;
-    border-radius: cssUtils.$radius-xl;
-  }
-
-  &__input {
-    flex-grow: 1;
-    padding: 0;
-    resize: none;
-    margin: auto 0px;
-    min-height: 1lh;
-    max-height: 154px;
-    outline: none;
-    border: none;
-    background: transparent;
-    overflow: hidden;
-
-    @include cssUtils.typography(primary, default);
-    color: cssUtils.$text-neutral-primary;
-    &::placeholder {
-      color: cssUtils.$text-neutral-tertiary;
-    }
-  }
-}

packages/react-ui/src/components/CopilotShell/Thread.tsx

@@ -1,11 +1,8 @@
 import type { AssistantMessage, Message, ToolMessage } from "@openuidev/react-headless";
 import { MessageProvider, useThread } from "@openuidev/react-headless";
 import clsx from "clsx";
-import { ArrowUp, Square } from "lucide-react";
-import React, { memo, useEffect, useLayoutEffect, useRef } from "react";
-import { useComposerState } from "../../hooks/useComposerState";
+import React, { memo, useEffect, useRef } from "react";
 import { ScrollVariant, useScrollToBottom } from "../../hooks/useScrollToBottom";
-import { IconButton } from "../IconButton";
 import { MarkDownRenderer } from "../MarkDownRenderer";
 import { MessageLoading as MessageLoadingComponent } from "../MessageLoading";
 import type { AssistantMessageComponent, UserMessageComponent } from "../OpenUIChat/types";
@@ -292,59 +289,5 @@ export const Messages = ({
   );
 };
 
-export const Composer = ({ className }: { className?: string }) => {
-  const { textContent, setTextContent } = useComposerState();
-  const processMessage = useThread((s) => s.processMessage);
-  const cancelMessage = useThread((s) => s.cancelMessage);
-  const isRunning = useThread((s) => s.isRunning);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleSubmit = () => {
-    if (!textContent.trim() || isRunning) {
-      return;
-    }
-
-    processMessage({
-      role: "user",
-      content: textContent,
-    });
-
-    setTextContent("");
-  };
-
-  useLayoutEffect(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-
-    input.style.height = "auto";
-    input.style.height = `${input.scrollHeight}px`;
-  }, [textContent]);
-
-  return (
-    <div className={clsx("openui-copilot-shell-thread-composer", className)}>
-      <div className="openui-copilot-shell-thread-composer__input-wrapper">
-        <textarea
-          ref={inputRef}
-          autoFocus
-          rows={1}
-          value={textContent}
-          onChange={(e) => setTextContent(e.target.value)}
-          className="openui-copilot-shell-thread-composer__input"
-          placeholder="Type your message..."
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSubmit();
-            }
-          }}
-        />
-        <IconButton
-          onClick={isRunning ? cancelMessage : handleSubmit}
-          icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-        />
-      </div>
-    </div>
-  );
-};
+// Re-export Composer from components
+export { Composer } from "./components";