@townco/ui 0.1.83 → 0.1.93

package/dist/core/store/chat-store.js

@@ -403,6 +403,37 @@ export const useChatStore = create((set) => ({
         };
         return { messages };
     }),
+    addSourcesToCurrentMessage: (sources) => set((state) => {
+        // Find the most recent assistant message
+        const lastAssistantIndex = state.messages.findLastIndex((msg) => msg.role === "assistant");
+        if (lastAssistantIndex === -1) {
+            // No assistant message exists yet - create one with the sources
+            logger.debug("No assistant message found, creating one for sources");
+            const newMessage = {
+                id: `msg_${Date.now()}_assistant`,
+                role: "assistant",
+                content: "",
+                timestamp: new Date().toISOString(),
+                isStreaming: false,
+                sources,
+            };
+            return { messages: [...state.messages, newMessage] };
+        }
+        const messages = [...state.messages];
+        const lastAssistantMsg = messages[lastAssistantIndex];
+        if (!lastAssistantMsg)
+            return state;
+        // Add sources to existing message
+        messages[lastAssistantIndex] = {
+            ...lastAssistantMsg,
+            sources: [...(lastAssistantMsg.sources || []), ...sources],
+        };
+        logger.debug("Added sources to current message", {
+            sourcesCount: sources.length,
+            totalSources: (lastAssistantMsg.sources?.length || 0) + sources.length,
+        });
+        return { messages };
+    }),
     updateToolCall: (sessionId, update) => set((state) => {
         const sessionToolCalls = state.toolCalls[sessionId] || [];
         const existingIndex = sessionToolCalls.findIndex((tc) => tc.id === update.id);
@@ -441,11 +472,15 @@ export const useChatStore = create((set) => ({
             attachedFiles: state.input.attachedFiles.filter((_, i) => i !== index),
         },
     })),
+    setSelectedPromptParameters: (params) => set((state) => ({
+        input: { ...state.input, selectedPromptParameters: params },
+    })),
     clearInput: () => set((_state) => ({
         input: {
             value: "",
             isSubmitting: false,
             attachedFiles: [],
+            selectedPromptParameters: undefined,
         },
     })),
     addTokenUsage: (tokenUsage) => set((state) => ({
@@ -494,4 +529,23 @@ export const useChatStore = create((set) => ({
     })),
     clearLogs: () => set({ logs: [] }),
     setActiveTab: (tab) => set({ activeTab: tab }),
+    truncateMessagesFrom: (messageIndex) => set((state) => {
+        // Truncate messages to keep only those before messageIndex
+        const truncatedMessages = state.messages.slice(0, messageIndex);
+        // Reset token tracking since context changed
+        return {
+            messages: truncatedMessages,
+            totalBilled: {
+                inputTokens: 0,
+                outputTokens: 0,
+                totalTokens: 0,
+            },
+            currentContext: {
+                inputTokens: 0,
+                outputTokens: 0,
+                totalTokens: 0,
+            },
+            latestContextSize: null,
+        };
+    }),
 }));

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { Button } from "./Button.js";
+export type ActionsProps = ComponentProps<"div">;
+/**
+ * Container for action buttons
+ */
+export declare const Actions: ({ className, children, ...props }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export type ActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+};
+/**
+ * Single action button with optional tooltip
+ */
+export declare const Action: ({ tooltip, children, label, className, variant, size, ...props }: ActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/Actions.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Button } from "./Button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
+/**
+ * Container for action buttons
+ */
+export const Actions = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center gap-1", className), ...props, children: children }));
+/**
+ * Single action button with optional tooltip
+ */
+export const Action = ({ tooltip, children, label, className, variant = "ghost", size = "sm", ...props }) => {
+    const button = (_jsxs(Button, { className: cn("relative size-8 p-1.5 text-muted-foreground hover:text-foreground", className), size: size, type: "button", variant: variant, ...props, children: [children, _jsx("span", { className: "sr-only", children: label || tooltip })
+        ] }));
+    if (tooltip) {
+        return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
+                    _jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })
+                ] }) }));
+    }
+    return button;
+};

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

@@ -25,6 +25,10 @@ export interface ChatInputRootProps extends Omit<React.FormHTMLAttributes<HTMLFo
      * Submit handler (legacy prop-based pattern)
      */
     onSubmit?: () => void | Promise<void>;
+    /**
+     * Cancel handler - called when user clicks stop button during streaming
+     */
+    onCancel?: (() => void | Promise<void>) | undefined;
     /** Whether input is disabled */
     disabled?: boolean;
     /** Whether input is currently submitting */
@@ -51,6 +55,10 @@ export interface ChatInputSubmitProps extends React.ButtonHTMLAttributes<HTMLBut
     asChild?: boolean;
 }
 declare const ChatInputSubmit: React.ForwardRefExoticComponent<ChatInputSubmitProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChatInputStopProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const ChatInputStop: React.ForwardRefExoticComponent<ChatInputStopProps & React.RefAttributes<HTMLButtonElement>>;
 export interface ChatInputToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const ChatInputToolbar: React.ForwardRefExoticComponent<ChatInputToolbarProps & React.RefAttributes<HTMLDivElement>>;
@@ -81,4 +89,4 @@ export interface ChatInputCommandMenuProps extends React.HTMLAttributes<HTMLDivE
 }
 declare const ChatInputCommandMenu: React.ForwardRefExoticComponent<ChatInputCommandMenuProps & React.RefAttributes<HTMLDivElement>>;
 export type { CommandMenuItem };
-export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, ChatInputActions as Actions, ChatInputAttachment as Attachment, ChatInputVoiceInput as VoiceInput, ChatInputCommandMenu as CommandMenu, };
+export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputStop as Stop, ChatInputToolbar as Toolbar, ChatInputActions as Actions, ChatInputAttachment as Attachment, ChatInputVoiceInput as VoiceInput, ChatInputCommandMenu as CommandMenu, };

package/dist/gui/components/ChatInput.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-import { Mic, Paperclip, SquareSlash } from "lucide-react";
+import { Mic, Paperclip, Square, SquareSlash } from "lucide-react";
 import * as React from "react";
 import { useChatInput as useCoreChatInput } from "../../core/hooks/use-chat-input.js";
 import { useMessageHistory } from "../../core/hooks/use-message-history.js";
@@ -16,7 +16,7 @@ const useChatInputContext = () => {
     }
     return context;
 };
-const ChatInputRoot = React.forwardRef(({ client, startSession, value: valueProp, onChange: onChangeProp, onSubmit: onSubmitProp, disabled = false, isSubmitting: isSubmittingProp, submitOnEnter = true, className, children, ...props }, ref) => {
+const ChatInputRoot = React.forwardRef(({ client, startSession, value: valueProp, onChange: onChangeProp, onSubmit: onSubmitProp, onCancel, disabled = false, isSubmitting: isSubmittingProp, submitOnEnter = true, className, children, ...props }, ref) => {
     const textareaRef = React.useRef(null);
     // Provide a dummy startSession function if not provided (for React hooks rule)
     const dummyStartSession = React.useCallback(async () => Promise.resolve(null), []);
@@ -110,6 +110,7 @@ const ChatInputRoot = React.forwardRef(({ client, startSession, value: valueProp
             value,
             onChange,
             onSubmit,
+            onCancel,
             disabled,
             isSubmitting,
             submitOnEnter,
@@ -330,11 +331,25 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
 ChatInputField.displayName = "ChatInput.Field";
 const ChatInputSubmit = React.forwardRef(({ asChild = false, className, disabled: disabledProp, children, ...props }, ref) => {
     const { value, disabled, isSubmitting } = useChatInputContext();
-    const isDisabled = disabledProp || disabled || isSubmitting || !value.trim();
+    // Hide when streaming (Stop button will be shown instead)
+    if (isSubmitting) {
+        return null;
+    }
+    const isDisabled = disabledProp || disabled || !value.trim();
     const Comp = asChild ? Slot : Button;
     return (_jsx(Comp, { ref: ref, type: "submit", disabled: isDisabled, variant: !asChild ? "default" : undefined, size: "icon", className: cn(!asChild && "gap-1.5 rounded-full", className), ...props, children: children }));
 });
 ChatInputSubmit.displayName = "ChatInput.Submit";
+const ChatInputStop = React.forwardRef(({ asChild = false, className, children, ...props }, ref) => {
+    const { onCancel, isSubmitting } = useChatInputContext();
+    const Comp = asChild ? Slot : Button;
+    // Only show when streaming
+    if (!isSubmitting) {
+        return null;
+    }
+    return (_jsx(Comp, { ref: ref, type: "button", onClick: () => onCancel?.(), variant: !asChild ? "default" : undefined, size: "icon", className: cn(!asChild && "gap-1.5 rounded-full", className), ...props, children: children || _jsx(Square, { className: "size-4 fill-current" }) }));
+});
+ChatInputStop.displayName = "ChatInput.Stop";
 const ChatInputToolbar = React.forwardRef(({ className, children, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn("flex items-center justify-between p-2", className), ...props, children: children }));
 });
@@ -425,8 +440,11 @@ const ChatInputVoiceInput = React.forwardRef(({ asChild = false, className, chil
 });
 ChatInputVoiceInput.displayName = "ChatInput.VoiceInput";
 const ChatInputCommandMenu = React.forwardRef(({ commands = [], className, onChange: _, ...props }, ref) => {
-    const { showCommandMenu, commandMenuQuery, selectedMenuIndex, setSelectedMenuIndex, setMenuItemCount, triggerCounter, onChange, } = useChatInputContext();
-    return (_jsx(ChatInputCommandMenuComponent, { ref: ref, commands: commands, showCommandMenu: showCommandMenu, commandMenuQuery: commandMenuQuery, selectedMenuIndex: selectedMenuIndex, setSelectedMenuIndex: setSelectedMenuIndex, setMenuItemCount: setMenuItemCount, triggerCounter: triggerCounter, onChange: onChange, className: className, ...props }));
+    const { showCommandMenu, commandMenuQuery, selectedMenuIndex, setSelectedMenuIndex, setMenuItemCount, triggerCounter, onChange, setShowCommandMenu, setCommandMenuQuery, } = useChatInputContext();
+    return (_jsx(ChatInputCommandMenuComponent, { ref: ref, commands: commands, showCommandMenu: showCommandMenu, commandMenuQuery: commandMenuQuery, selectedMenuIndex: selectedMenuIndex, setSelectedMenuIndex: setSelectedMenuIndex, setMenuItemCount: setMenuItemCount, triggerCounter: triggerCounter, onChange: onChange, onClose: () => {
+            setShowCommandMenu(false);
+            setCommandMenuQuery("");
+        }, className: className, ...props }));
 });
 ChatInputCommandMenu.displayName = "ChatInput.CommandMenu";
-export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, ChatInputActions as Actions, ChatInputAttachment as Attachment, ChatInputVoiceInput as VoiceInput, ChatInputCommandMenu as CommandMenu, };
+export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputStop as Stop, ChatInputToolbar as Toolbar, ChatInputActions as Actions, ChatInputAttachment as Attachment, ChatInputVoiceInput as VoiceInput, ChatInputCommandMenu as CommandMenu, };

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

@@ -16,5 +16,6 @@ export interface ChatInputCommandMenuProps extends Omit<React.HTMLAttributes<HTM
     setMenuItemCount: (count: number) => void;
     triggerCounter: number;
     onChange: (value: string) => void;
+    onClose?: () => void;
 }
 export declare const ChatInputCommandMenu: React.ForwardRefExoticComponent<ChatInputCommandMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatInputCommandMenu.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 /* -------------------------------------------------------------------------------------------------
  * ChatInputCommandMenu
  * -----------------------------------------------------------------------------------------------*/
-export const ChatInputCommandMenu = React.forwardRef(({ commands = [], showCommandMenu, commandMenuQuery, selectedMenuIndex, setSelectedMenuIndex, setMenuItemCount, triggerCounter, onChange, className, ...props }, ref) => {
+export const ChatInputCommandMenu = React.forwardRef(({ commands = [], showCommandMenu, commandMenuQuery, selectedMenuIndex, setSelectedMenuIndex, setMenuItemCount, triggerCounter, onChange, onClose, className, ...props }, ref) => {
     // Fuzzy search implementation
     const fuzzyMatch = React.useCallback((text, query) => {
         const lowerText = text.toLowerCase();
@@ -46,19 +46,36 @@ export const ChatInputCommandMenu = React.forwardRef(({ commands = [], showComma
     React.useEffect(() => {
         setSelectedMenuIndex(0);
     }, [setSelectedMenuIndex]);
+    // Track the last handled trigger to prevent double-firing
+    const lastHandledTrigger = React.useRef(0);
     // Handle selection when triggered
     React.useEffect(() => {
-        if (triggerCounter > 0 && filteredCommands[selectedMenuIndex]) {
+        // Only handle if triggerCounter increased and we haven't handled this trigger yet
+        if (triggerCounter > 0 &&
+            triggerCounter !== lastHandledTrigger.current &&
+            filteredCommands[selectedMenuIndex]) {
+            lastHandledTrigger.current = triggerCounter;
             filteredCommands[selectedMenuIndex].onSelect();
-            // Clear the input after selection
+            // Clear the input and close the menu after selection
             onChange("");
+            onClose?.();
         }
-    }, [triggerCounter, filteredCommands, selectedMenuIndex, onChange]);
+    }, [
+        triggerCounter,
+        filteredCommands,
+        selectedMenuIndex,
+        onChange,
+        onClose,
+    ]);
     if (!showCommandMenu || filteredCommands.length === 0) {
         return null;
     }
     return (_jsxs("div", { ref: ref, className: cn("absolute bottom-full left-0 z-50 mb-2 w-full max-w-md", "rounded-md border border-border bg-card p-2 shadow-lg", className), ...props, children: [
-            _jsx("div", { className: "text-caption font-semibold text-muted-foreground px-2 py-1", children: "Commands" }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredCommands.map((command, index) => (_jsxs("button", { type: "button", onClick: () => command.onSelect(), className: cn("w-full rounded-sm px-2 py-2 text-left text-paragraph-sm transition-colors", "flex items-start gap-2", "hover:bg-muted", index === selectedMenuIndex && "bg-muted"), children: [command.icon && (_jsx("span", { className: "shrink-0 mt-0.5", children: command.icon })), _jsxs("div", { className: "flex-1 min-w-0", children: [
+            _jsx("div", { className: "text-caption font-semibold text-muted-foreground px-2 py-1", children: "Commands" }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredCommands.map((command, index) => (_jsxs("button", { type: "button", onClick: () => {
+                        command.onSelect();
+                        onChange("");
+                        onClose?.();
+                    }, className: cn("w-full rounded-sm px-2 py-2 text-left text-paragraph-sm transition-colors", "flex items-start gap-2", "hover:bg-muted", index === selectedMenuIndex && "bg-muted"), children: [command.icon && (_jsx("span", { className: "shrink-0 mt-0.5", children: command.icon })), _jsxs("div", { className: "flex-1 min-w-0", children: [
                                 _jsx("div", { className: "font-medium", children: command.label }), command.description && (_jsx("div", { className: "text-caption text-muted-foreground truncate", children: command.description }))] })
                     ] }, command.id))) })
         ] }));

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

@@ -0,0 +1,13 @@
+import type { PromptParameter } from "../../sdk/transports/types.js";
+export interface ChatInputParametersProps {
+    /** Available prompt parameters from the agent */
+    parameters: PromptParameter[];
+    /** Optional CSS class name */
+    className?: string;
+}
+/**
+ * A token-based component for selecting prompt parameters per-message.
+ * Shows non-default selections as dismissible chips with dropdown to change.
+ */
+export declare function ChatInputParameters({ parameters, className }: ChatInputParametersProps): import("react/jsx-runtime").JSX.Element | null;
+export default ChatInputParameters;

package/dist/gui/components/ChatInputParameters.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { useChatStore } from "../../core/store/chat-store.js";
+import { cn } from "../lib/utils.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./DropdownMenu.js";
+/**
+ * A token-based component for selecting prompt parameters per-message.
+ * Shows non-default selections as dismissible chips with dropdown to change.
+ */
+export function ChatInputParameters({ parameters, className, }) {
+    const selectedParams = useChatStore((state) => state.input.selectedPromptParameters);
+    const setSelectedPromptParameters = useChatStore((state) => state.setSelectedPromptParameters);
+    // Get default values for each parameter
+    const getDefaultValue = React.useCallback((param) => {
+        return param.defaultOptionId ?? param.options[0]?.id ?? "";
+    }, []);
+    // Initialize with default values if not set
+    React.useEffect(() => {
+        if (!selectedParams || Object.keys(selectedParams).length === 0) {
+            const defaults = {};
+            for (const param of parameters) {
+                defaults[param.id] = getDefaultValue(param);
+            }
+            if (Object.keys(defaults).length > 0) {
+                setSelectedPromptParameters(defaults);
+            }
+        }
+    }, [
+        parameters,
+        selectedParams,
+        setSelectedPromptParameters,
+        getDefaultValue,
+    ]);
+    const handleParameterChange = React.useCallback((parameterId, optionId) => {
+        const newParams = {
+            ...selectedParams,
+            [parameterId]: optionId,
+        };
+        setSelectedPromptParameters(newParams);
+    }, [selectedParams, setSelectedPromptParameters]);
+    if (parameters.length === 0) {
+        return null;
+    }
+    // Get non-default selections to show as tokens
+    const activeSelections = parameters
+        .map((param) => {
+        const currentValue = selectedParams?.[param.id];
+        const defaultValue = getDefaultValue(param);
+        const selectedOption = param.options.find((opt) => opt.id === currentValue);
+        const isNonDefault = currentValue && currentValue !== defaultValue;
+        return {
+            param,
+            selectedOption,
+            isNonDefault,
+        };
+    })
+        .filter((item) => item.selectedOption);
+    return (_jsx("div", { className: cn("flex items-center gap-1", className), children: activeSelections.map(({ param, selectedOption, isNonDefault }) => (_jsxs(DropdownMenu, { children: [
+                _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("inline-flex h-10 items-center gap-1.5 rounded-full px-3", "text-sm font-medium transition-colors", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", isNonDefault
+                            ? "bg-accent text-accent-foreground hover:bg-accent/80"
+                            : "bg-muted/50 text-muted-foreground hover:bg-muted"), children: [
+                            _jsx("span", { className: "truncate max-w-[140px]", children: selectedOption?.label }), _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" })
+                        ] }) }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-[160px]", children: param.options.map((option) => (_jsx(DropdownMenuItem, { onClick: () => handleParameterChange(param.id, option.id), className: cn(selectedParams?.[param.id] === option.id && "bg-accent"), children: option.label }, option.id))) })
+            ] }, param.id))) }));
+}
+export default ChatInputParameters;

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

@@ -13,6 +13,8 @@ interface ChatLayoutContextValue {
     togglePanel: () => void;
     isDraggingAside: boolean;
     setIsDraggingAside: (dragging: boolean) => void;
+    asideWidth: number;
+    setAsideWidth: (width: number) => void;
 }
 declare const ChatLayoutContext: React.Context<ChatLayoutContextValue | undefined>;
 declare const useChatLayoutContext: () => ChatLayoutContextValue;