@townco/ui 0.1.121 → 0.1.123

package/dist/core/hooks/use-chat-messages.js

@@ -86,10 +86,15 @@ export function useChatMessages(client, startSession) {
                     : {}),
             };
             addMessage(userMessage);
-            // Update URL with session ID on first message (if not already in URL)
-            if (typeof window !== "undefined" &&
-                !new URL(window.location.href).searchParams.has("session")) {
-                safeUpdateUrl(activeSessionId, false);
+            // Update URL with session ID if not already present
+            if (typeof window !== "undefined" && activeSessionId) {
+                const currentUrl = new URL(window.location.href);
+                if (!currentUrl.searchParams.has("session")) {
+                    logger.info("Updating URL with session ID", {
+                        sessionId: activeSessionId,
+                    });
+                    safeUpdateUrl(activeSessionId, false);
+                }
             }
             // Create placeholder for assistant message BEFORE sending
             const assistantMessage = {

package/dist/core/hooks/use-chat-session.js

@@ -8,17 +8,26 @@ const logger = createLogger("use-chat-session", "debug");
  * as the browser won't allow changing the URL to remove/modify credentials.
  */
 export function safeUpdateUrl(sessionId, useReplace = false) {
-    if (typeof window === "undefined")
+    if (typeof window === "undefined") {
+        logger.debug("safeUpdateUrl: window is undefined, skipping");
         return;
+    }
     try {
         const url = new URL(window.location.href);
         url.searchParams.set("session", sessionId);
+        const newUrl = url.toString();
+        logger.info("safeUpdateUrl: updating URL", {
+            sessionId,
+            useReplace,
+            newUrl,
+        });
         if (useReplace) {
-            window.history.replaceState({}, "", url.toString());
+            window.history.replaceState({}, "", newUrl);
         }
         else {
-            window.history.pushState({}, "", url.toString());
+            window.history.pushState({}, "", newUrl);
         }
+        logger.info("safeUpdateUrl: URL updated successfully");
     }
     catch (error) {
         // URL update can fail with HTTP Basic Auth credentials in the URL

package/dist/gui/components/ChatLayout.js

@@ -287,7 +287,10 @@ const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChan
         if (!hasInitialScrolledRef.current) {
             // Use a small delay to let initial content render
             const timeout = setTimeout(() => {
-                container.scrollTop = container.scrollHeight;
+                // Only scroll if the content actually overflows the viewport.
+                if (container.scrollHeight > container.clientHeight + 1) {
+                    container.scrollTop = container.scrollHeight;
+                }
                 hasInitialScrolledRef.current = true;
             }, 100);
             return () => clearTimeout(timeout);

package/dist/gui/components/ChatView.js

@@ -343,7 +343,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                     // Check if this message should be dimmed (comes after editing message)
                                                     const shouldDim = editingMessageIndex !== null &&
                                                         index > editingMessageIndex;
-                                                    return (_jsx(Message, { message: message, className: cn("group", shouldDim && "opacity-50"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: "flex flex-col w-full min-w-0", children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend, sticky: true, onEditingChange: (isEditing) => {
+                                                    return (_jsx(Message, { message: message, className: cn("group", shouldDim && "opacity-50", message.role === "user" && "mb-4"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: cn("flex flex-col w-full min-w-0"), children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend, onEditingChange: (isEditing) => {
                                                                     setEditingMessageIndex(isEditing ? index : null);
                                                                 } })) : (_jsxs(_Fragment, { children: [
                                                                     _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }), _jsx(MessageActions, { message: message, isStreaming: message.isStreaming, onSendMessage: sendMessage, isLastAssistantMessage: index ===

package/dist/gui/components/EditableUserMessage.js

@@ -55,8 +55,11 @@ function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAnd
         }
     }, [message.content]);
     const handleStartEdit = useCallback(() => {
+        // Don't allow entering edit mode while the agent is streaming.
+        if (isStreaming)
+            return;
         setIsEditing(true);
-    }, []);
+    }, [isStreaming]);
     // Focus the contenteditable element when entering edit mode
     useEffect(() => {
         if (isEditing && contentEditableRef.current) {
@@ -114,13 +117,13 @@ function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAnd
                     }
                     : undefined, role: sticky && !isEditing ? "button" : undefined, tabIndex: sticky && !isEditing ? 0 : undefined, children: _jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: cn("max-w-[200px] max-h-[200px] rounded-lg object-cover", isEditing && "opacity-50") }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), message.content && (
                         // biome-ignore lint/a11y/useSemanticElements: contentEditable div preserves whitespace formatting better than textarea
-                        _jsx("div", { ref: contentEditableRef, role: "textbox", tabIndex: isEditing ? 0 : -1, contentEditable: isEditing, onKeyDown: isEditing ? handleKeyDown : undefined, suppressContentEditableWarning: true, className: cn("whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-foreground leading-relaxed outline-none", isEditing && "cursor-text", !isEditing && "cursor-default"), children: message.content }))] }) }), !isStreaming && message.content && (_jsx(Actions, { className: cn("mt-2 transition-opacity justify-end", isEditing
-                    ? "opacity-100"
-                    : "opacity-0 group-hover/user-message:opacity-100"), children: isEditing ? (_jsxs(_Fragment, { children: [
-                        _jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelEdit, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleSaveAndResend, className: "h-7 px-3 text-xs", children: "Send" })
-                    ] })) : (_jsxs(_Fragment, { children: [
-                        _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? (_jsx(Check, { className: "size-4" })) : (_jsx(Copy, { className: "size-4" })) }), _jsx(Action, { onClick: handleStartEdit, tooltip: "Edit", children: _jsx(Pencil, { className: "size-4" }) })
-                    ] })) }))] }));
+                        _jsx("div", { ref: contentEditableRef, role: "textbox", tabIndex: isEditing ? 0 : -1, contentEditable: isEditing, onKeyDown: isEditing ? handleKeyDown : undefined, suppressContentEditableWarning: true, className: cn("whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-foreground leading-relaxed outline-none", isEditing && "cursor-text", !isEditing && "cursor-default"), children: message.content }))] }) }), message.content && (_jsx("div", { className: "mt-2", children: _jsx(Actions, { className: cn("justify-end transition-opacity", isEditing
+                        ? "opacity-100 pointer-events-auto"
+                        : "opacity-0 pointer-events-none group-hover/user-message:opacity-100 group-hover/user-message:pointer-events-auto"), children: isEditing ? (_jsxs(_Fragment, { children: [
+                            _jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelEdit, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx(Button, { size: "sm", disabled: isStreaming, onClick: handleSaveAndResend, className: "h-7 px-3 text-xs", children: "Send" })
+                        ] })) : (_jsxs(_Fragment, { children: [
+                            _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? (_jsx(Check, { className: "size-4" })) : (_jsx(Copy, { className: "size-4" })) }), _jsx(Action, { disabled: isStreaming, onClick: handleStartEdit, tooltip: isStreaming ? "Wait for agent to finish" : "Edit", children: _jsx(Pencil, { className: "size-4" }) })
+                        ] })) }) }))] }));
 }
 export const EditableUserMessage = memo(PureEditableUserMessage, (prevProps, nextProps) => {
     return (prevProps.isStreaming === nextProps.isStreaming &&

package/dist/gui/components/MessageActions.d.ts

@@ -8,7 +8,10 @@ export interface MessageActionsProps {
     onRedo?: () => void;
     /** Callback to send a message to the agent */
     onSendMessage?: (message: string) => void;
-    /** Whether this is the last assistant message (shows actions by default) */
+    /**
+     * Whether this is the last assistant message.
+     * If true, actions are shown by default (not just on hover).
+     */
     isLastAssistantMessage?: boolean;
 }
 declare function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLastAssistantMessage }: MessageActionsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/MessageActions.js

@@ -17,20 +17,18 @@ const EXPORT_FORMATS = [
 ];
 function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLastAssistantMessage = false, }) {
     const [isCopied, setIsCopied] = useState(false);
-    // Don't show actions while streaming
-    if (isStreaming) {
+    // Only show actions for assistant messages with actual text content.
+    // (Tool-only assistant messages exist and shouldn't render a duplicate action row.)
+    if (message.role !== "assistant" || !message.content?.trim()) {
         return null;
     }
-    // Only show actions for assistant messages with content
-    if (message.role !== "assistant" || !message.content) {
-        return null;
-    }
-    // For non-last messages, show on hover only
     const visibilityClass = isLastAssistantMessage
         ? ""
         : "opacity-0 group-hover:opacity-100 transition-opacity";
+    const disableWhileStreaming = Boolean(isStreaming);
+    const canCopy = Boolean(message.content) && !disableWhileStreaming;
     const handleCopy = async () => {
-        if (!message.content) {
+        if (!message.content || disableWhileStreaming) {
             toast.error("There's no text to copy!");
             return;
         }
@@ -48,6 +46,8 @@ function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLas
         }
     };
     const handleRedo = () => {
+        if (disableWhileStreaming)
+            return;
         if (onRedo) {
             onRedo();
         }
@@ -56,6 +56,8 @@ function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLas
         }
     };
     const handleExport = (format) => {
+        if (disableWhileStreaming)
+            return;
         if (onSendMessage) {
             onSendMessage(`produce an artifact as ${format} for this session`);
         }
@@ -63,16 +65,18 @@ function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLas
             toast.info("Export not available");
         }
     };
-    return (_jsxs(Actions, { className: cn(visibilityClass), children: [
-            _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? _jsx(Check, { className: "size-4" }) : _jsx(Copy, { className: "size-4" }) }), _jsx(Action, { onClick: handleRedo, tooltip: "Redo", children: _jsx(RotateCcw, { className: "size-4" }) }), _jsxs(DropdownMenu, { children: [
-                    _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
-                                _jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { className: cn("relative size-7 p-1.5 text-muted-foreground hover:text-foreground"), size: "sm", type: "button", variant: "ghost", children: [
-                                                _jsx(Download, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Export" })
-                                            ] }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Export" }) })
-                            ] }) }), _jsx(DropdownMenuContent, { align: "start", children: EXPORT_FORMATS.map((format) => (_jsxs(DropdownMenuItem, { onClick: () => handleExport(format.label), children: [
-                                _jsx(format.icon, { className: "size-4 mr-2" }), format.label] }, format.id))) })
-                ] })
-        ] }));
+    return (_jsx("div", { className: "mt-1", children: _jsxs(Actions, { className: cn(visibilityClass, isLastAssistantMessage
+                ? "pointer-events-auto"
+                : "pointer-events-none group-hover:pointer-events-auto"), children: [
+                _jsx(Action, { disabled: !canCopy, onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? (_jsx(Check, { className: "size-4" })) : (_jsx(Copy, { className: "size-4" })) }), _jsx(Action, { disabled: disableWhileStreaming, onClick: handleRedo, tooltip: "Redo", children: _jsx(RotateCcw, { className: "size-4" }) }), _jsxs(DropdownMenu, { children: [
+                        _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
+                                    _jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { className: cn("relative size-7 p-1.5 text-muted-foreground hover:text-foreground"), disabled: disableWhileStreaming, size: "sm", type: "button", variant: "ghost", children: [
+                                                    _jsx(Download, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Export" })
+                                                ] }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Export" }) })
+                                ] }) }), _jsx(DropdownMenuContent, { align: "start", children: EXPORT_FORMATS.map((format) => (_jsxs(DropdownMenuItem, { onClick: () => handleExport(format.label), children: [
+                                    _jsx(format.icon, { className: "size-4 mr-2" }), format.label] }, format.id))) })
+                    ] })
+            ] }) }));
 }
 export const MessageActions = memo(PureMessageActions, (prevProps, nextProps) => {
     if (prevProps.isStreaming !== nextProps.isStreaming) {

package/dist/gui/hooks/use-scroll-to-bottom.js

@@ -375,6 +375,11 @@ export function useScrollToBottom() {
             return;
         }
         const scrollIfNeeded = () => {
+            // If content doesn't overflow, don't force any programmatic scroll.
+            // This avoids "snapping" the first/small streaming message to the top.
+            if (container.scrollHeight <= container.clientHeight + 1) {
+                return;
+            }
             // Only auto-scroll if user was at bottom and isn't actively scrolling
             if (isAtBottomRef.current && !isUserScrollingRef.current) {
                 requestAnimationFrame(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.121",
+  "version": "0.1.123",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@townco/core": "0.0.99",
+    "@townco/core": "0.0.101",
     "@types/mdast": "^4.0.4",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "class-variance-authority": "^0.7.1",
@@ -67,7 +67,7 @@
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.118",
+    "@townco/tsconfig": "0.1.120",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/unist": "^3.0.3",