lemma-sdk 0.2.11 → 0.2.12

package/README.md

@@ -223,6 +223,40 @@ The intended split is:
 - SDK: `useAssistantController`, message/tool normalization, plan parsing, tool rollups, and assistant UI primitives.
 - App: modal shell, fullscreen behavior, route navigation, workspace/file viewers, and product-specific renderers.
 
+Useful UI primitives exported from `lemma-sdk/react`:
+
+- `AssistantHeader`
+- `AssistantConversationList`
+- `AssistantModelPicker`
+- `AssistantShellLayout`
+- `AssistantComposer`
+- `AssistantMessageViewport`
+- `AssistantAskOverlay`
+- `AssistantPendingFileChip`
+- `AssistantStatusPill`
+- `MessageGroup`
+- `PlanSummaryStrip`
+
+For a direct plug-and-play component, `AssistantEmbedded` wires `useAssistantController` into the default assistant experience:
+
+```tsx
+import { AssistantEmbedded } from "lemma-sdk/react";
+
+function SupportAssistant() {
+  return (
+    <AssistantEmbedded
+      client={client}
+      assistantId="support_assistant"
+      podId="pod_123"
+      title="Support Assistant"
+      subtitle="Ask questions about this pod."
+      placeholder="Message Support Assistant"
+      showConversationList
+    />
+  );
+}
+```
+
 ### Assistant names (resource key)
 
 Assistant CRUD is name-based:

package/dist/react/components/AssistantChrome.d.ts

@@ -0,0 +1,77 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import type { AssistantConversationListItem, AssistantConversationRenderArgs } from "./assistant-types.js";
+export interface AssistantHeaderProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    badge?: ReactNode;
+    controls?: ReactNode;
+    className?: string;
+}
+export interface AssistantMessageViewportProps extends ComponentPropsWithoutRef<"div"> {
+    innerClassName?: string;
+    children: ReactNode;
+}
+export declare const AssistantMessageViewport: import("react").ForwardRefExoticComponent<AssistantMessageViewportProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AssistantShellLayoutProps {
+    sidebar?: ReactNode;
+    sidebarVisible?: boolean;
+    main: ReactNode;
+    className?: string;
+}
+export declare function AssistantShellLayout({ sidebar, sidebarVisible, main, className, }: AssistantShellLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantHeader({ title, subtitle, badge, controls, className, }: AssistantHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface AssistantConversationListProps {
+    conversations: AssistantConversationListItem[];
+    activeConversationId: string | null;
+    onSelectConversation: (conversationId: string) => void;
+    onNewConversation?: () => void;
+    renderConversationLabel?: (args: AssistantConversationRenderArgs) => ReactNode;
+    title?: ReactNode;
+    newLabel?: ReactNode;
+    className?: string;
+}
+export declare function AssistantConversationList({ conversations, activeConversationId, onSelectConversation, onNewConversation, renderConversationLabel, title, newLabel, className, }: AssistantConversationListProps): import("react/jsx-runtime").JSX.Element;
+export interface AssistantModelPickerProps<TValue extends string = string> {
+    value: TValue | null;
+    options: TValue[];
+    disabled?: boolean;
+    autoLabel?: ReactNode;
+    getOptionLabel?: (value: TValue) => ReactNode;
+    onChange: (value: TValue | null) => void;
+    className?: string;
+}
+export declare function AssistantModelPicker<TValue extends string = string>({ value, options, disabled, autoLabel, getOptionLabel, onChange, className, }: AssistantModelPickerProps<TValue>): import("react/jsx-runtime").JSX.Element;
+export interface AssistantAskOverlayProps {
+    questionNumber: number;
+    totalQuestions: number;
+    question: ReactNode;
+    options: string[];
+    selectedOptions: string[];
+    canContinue: boolean;
+    continueLabel: ReactNode;
+    onSelectOption: (option: string) => void;
+    onContinue?: () => void;
+    onSkip?: () => void;
+    mode?: "single_select" | "multi_select" | "rank_priorities";
+}
+export declare function AssistantAskOverlay({ questionNumber, totalQuestions, question, options, selectedOptions, canContinue, continueLabel, onSelectOption, onContinue, onSkip, mode, }: AssistantAskOverlayProps): import("react/jsx-runtime").JSX.Element;
+export interface AssistantPendingFileChipProps {
+    label: ReactNode;
+    onRemove?: () => void;
+    className?: string;
+}
+export interface AssistantComposerProps {
+    floating?: ReactNode;
+    status?: ReactNode;
+    pendingFiles?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+export declare function AssistantComposer({ floating, status, pendingFiles, children, className, }: AssistantComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantPendingFileChip({ label, onRemove, className, }: AssistantPendingFileChipProps): import("react/jsx-runtime").JSX.Element;
+export interface AssistantStatusPillProps {
+    label: ReactNode;
+    subtle?: boolean;
+    className?: string;
+}
+export declare function AssistantStatusPill({ label, subtle, className, }: AssistantStatusPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/AssistantChrome.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+function cx(...values) {
+    return values.filter(Boolean).join(" ");
+}
+export const AssistantMessageViewport = forwardRef(function AssistantMessageViewport({ className, innerClassName, children, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cx("min-h-0 flex-1 overflow-y-auto bg-[var(--bg-surface)] px-4 py-4", className), ...props, children: _jsx("div", { className: cx("mx-auto flex w-full max-w-5xl flex-col gap-3", innerClassName), children: children }) }));
+});
+export function AssistantShellLayout({ sidebar, sidebarVisible = false, main, className, }) {
+    return (_jsxs("div", { className: cx("mx-auto flex h-full w-full min-h-0 flex-col gap-3 font-sans antialiased", !!sidebar && sidebarVisible && "lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-3", className), children: [sidebar && sidebarVisible ? (_jsx("div", { className: "hidden h-full min-h-0 lg:block", children: sidebar })) : null, main] }));
+}
+export function AssistantHeader({ title, subtitle, badge, controls, className, }) {
+    return (_jsxs("div", { className: cx("flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", className), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [badge ? (_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] shadow-[var(--shadow-xs)]", children: badge })) : null, _jsxs("div", { children: [_jsx("h3", { className: "text-[13px] font-semibold leading-tight text-[var(--text-primary)]", children: title }), subtitle ? (_jsx("p", { className: "text-[11px] text-[var(--text-tertiary)]", children: subtitle })) : null] })] }), controls ? (_jsx("div", { className: "flex items-center gap-1", children: controls })) : null] }));
+}
+export function AssistantConversationList({ conversations, activeConversationId, onSelectConversation, onNewConversation, renderConversationLabel, title = "Conversations", newLabel = "New", className, }) {
+    return (_jsxs("aside", { className: cx("flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", className), children: [_jsx("div", { className: "border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[13px] font-semibold text-[var(--text-primary)]", children: title }), _jsxs("div", { className: "mt-1 text-[11px] text-[var(--text-tertiary)]", children: [conversations.length, " total"] })] }), onNewConversation ? (_jsx("button", { type: "button", onClick: onNewConversation, className: "rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]", children: newLabel })) : null] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-2", children: conversations.map((conversation) => {
+                    const isActive = conversation.id === activeConversationId;
+                    return (_jsxs("button", { type: "button", onClick: () => onSelectConversation(conversation.id), className: cx("w-full rounded-xl border px-3 py-2.5 text-left transition-colors", isActive
+                            ? "border-[color:color-mix(in_srgb,_var(--brand-primary)_44%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_42%,_var(--bg-surface))]"
+                            : "border-[var(--border-default)] bg-[var(--bg-surface)] hover:bg-[var(--bg-subtle)]"), children: [_jsx("div", { className: "truncate text-[12px] font-medium text-[var(--text-primary)]", children: renderConversationLabel
+                                    ? renderConversationLabel({ conversation, isActive })
+                                    : (conversation.title || "Untitled conversation") }), _jsx("div", { className: "mt-1 text-[10px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]", children: (conversation.status || "waiting").toLowerCase() })] }, conversation.id));
+                }) })] }));
+}
+export function AssistantModelPicker({ value, options, disabled, autoLabel = "Auto", getOptionLabel, onChange, className, }) {
+    const autoValue = "__AUTO__";
+    return (_jsxs("select", { value: value ?? autoValue, onChange: (event) => onChange(event.target.value === autoValue ? null : event.target.value), disabled: disabled, className: cx("h-8 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] px-3 text-[11px] text-[var(--text-secondary)]", className), "aria-label": "Conversation model", title: "Conversation model", children: [_jsx("option", { value: autoValue, children: autoLabel }), options.map((option) => (_jsx("option", { value: option, children: getOptionLabel ? getOptionLabel(option) : option }, option)))] }));
+}
+export function AssistantAskOverlay({ questionNumber, totalQuestions, question, options, selectedOptions, canContinue, continueLabel, onSelectOption, onContinue, onSkip, mode = "single_select", }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-[11px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]", children: ["Question ", questionNumber, " of ", totalQuestions] }), _jsx("p", { className: "mt-1 text-[14px] font-medium leading-6 text-[var(--text-primary)]", children: question })] }), onSkip ? (_jsx("button", { type: "button", onClick: onSkip, className: "rounded-md px-2 py-1 text-[12px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]", children: "Skip" })) : null] }), _jsx("div", { className: "max-h-[260px] space-y-1.5 overflow-y-auto pr-1", children: options.map((option, optionIndex) => {
+                    const isSelected = selectedOptions.includes(option);
+                    const rankLabel = mode === "rank_priorities" && isSelected
+                        ? selectedOptions.indexOf(option) + 1
+                        : null;
+                    return (_jsx("button", { type: "button", onClick: () => onSelectOption(option), className: cx("w-full rounded-lg border px-2.5 py-2 text-left text-[13px] transition-colors", isSelected
+                            ? "border-[color:color-mix(in_srgb,_var(--brand-primary)_64%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-primary)_14%,_transparent)] text-[var(--text-primary)]"
+                            : "border-[var(--border-default)] bg-[var(--bg-canvas)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]"), children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [rankLabel ? (_jsx("span", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--brand-primary)] px-1 text-[10px] font-semibold text-[var(--text-on-brand)]", children: rankLabel })) : (_jsx("span", { className: cx("inline-block h-2.5 w-2.5 rounded-full border", isSelected
+                                        ? "border-[var(--brand-primary)] bg-[var(--brand-primary)]"
+                                        : "border-[var(--border-default)] bg-transparent") })), option] }) }, `${option}-${optionIndex}`));
+                }) }), onContinue ? (_jsx("div", { className: "flex justify-end", children: _jsx("button", { type: "button", onClick: onContinue, disabled: !canContinue, className: cx("rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors", canContinue
+                        ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
+                        : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), children: continueLabel }) })) : null] }));
+}
+export function AssistantComposer({ floating, status, pendingFiles, children, className, }) {
+    return (_jsxs("div", { className: cx("relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", className), children: [floating ? (_jsx("div", { className: "absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: floating })) : null, _jsx("div", { className: "min-h-[34px] px-2 pb-1", children: _jsx("div", { className: "flex min-h-[26px] items-center transition-opacity duration-200", children: status || _jsx("span", { "aria-hidden": "true", className: "inline-block h-[30px]" }) }) }), pendingFiles ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-1 pb-1.5", children: pendingFiles })) : null, children] }));
+}
+export function AssistantPendingFileChip({ label, onRemove, className, }) {
+    return (_jsxs("span", { className: cx("inline-flex max-w-full items-center gap-1.5 rounded-full bg-[var(--bg-subtle)] px-2 py-1 text-[11px] text-[var(--text-secondary)]", className), children: [_jsx("span", { className: "truncate max-w-[180px]", children: label }), onRemove ? (_jsx("button", { type: "button", onClick: onRemove, className: "inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-[var(--bg-canvas)]", title: "Remove file", children: "\u00D7" })) : null] }));
+}
+export function AssistantStatusPill({ label, subtle = false, className, }) {
+    return (_jsxs("div", { className: cx("inline-flex min-h-[30px] max-w-full items-center gap-2 rounded-full px-3 py-1.5 text-[12px] transition-all duration-200", subtle
+            ? "border border-[color:color-mix(in_srgb,_var(--border-default)_72%,_transparent)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_90%,_transparent)] text-[var(--text-tertiary)]"
+            : "border border-[color:color-mix(in_srgb,_var(--brand-primary)_24%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_28%,_var(--bg-surface))] text-[var(--text-secondary)]", className), children: [_jsxs("span", { className: "relative inline-flex h-2.5 w-2.5 shrink-0", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--brand-primary)]/45" }), _jsx("span", { className: "relative inline-flex h-2.5 w-2.5 rounded-full bg-[var(--brand-primary)]" })] }), _jsx("span", { className: "truncate", children: label })] }));
+}

package/dist/react/components/AssistantEmbedded.d.ts

@@ -0,0 +1,8 @@
+import type { LemmaClient } from "../../client.js";
+import { type AssistantConversationScope } from "../useAssistantController.js";
+import { type AssistantExperienceViewProps } from "./AssistantExperience.js";
+export interface AssistantEmbeddedProps extends Omit<AssistantExperienceViewProps, "controller">, AssistantConversationScope {
+    client: LemmaClient;
+    enabled?: boolean;
+}
+export declare function AssistantEmbedded({ client, podId, assistantId, organizationId, enabled, ...props }: AssistantEmbeddedProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/AssistantEmbedded.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAssistantController } from "../useAssistantController.js";
+import { AssistantExperienceView } from "./AssistantExperience.js";
+export function AssistantEmbedded({ client, podId, assistantId, organizationId, enabled = true, ...props }) {
+    const controller = useAssistantController({
+        client,
+        podId: podId ?? undefined,
+        assistantId: assistantId ?? undefined,
+        organizationId: organizationId ?? undefined,
+        enabled,
+    });
+    return _jsx(AssistantExperienceView, { controller: controller, ...props });
+}

package/dist/react/components/AssistantExperience.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { AvailableModels } from "../../types.js";
+import { AssistantAskOverlay, AssistantMessageViewport, } from "./AssistantChrome.js";
 function cx(...values) {
     return values.filter(Boolean).join(" ");
 }
@@ -997,26 +998,14 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
                             return (_jsxs("button", { type: "button", onClick: () => controller.selectConversation(conversation.id), className: cx("w-full rounded-xl border px-3 py-2.5 text-left transition-colors", isActive
                                     ? "border-[color:color-mix(in_srgb,_var(--brand-primary)_44%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_42%,_var(--bg-surface))]"
                                     : "border-[var(--border-default)] bg-[var(--bg-surface)] hover:bg-[var(--bg-subtle)]"), children: [_jsx("div", { className: "text-[12px] font-medium text-[var(--text-primary)]", children: renderConversationLabel({ conversation, isActive }) }), _jsx("div", { className: "mt-1 text-[10px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]", children: (conversation.status || "waiting").toLowerCase() })] }, conversation.id));
-                        }) })] })) : null, _jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "h-7 w-7 rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] flex items-center justify-center shadow-[var(--shadow-xs)]", children: _jsx("span", { className: "text-[var(--text-on-brand)] text-xs", children: "\u2728" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-[var(--text-primary)] text-[13px] leading-tight", children: title }), _jsx("p", { className: "text-[11px] text-[var(--text-tertiary)]", children: subtitle })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("select", { value: controller.conversationModel || "", onChange: (event) => { void handleModelChange(event.target.value || null); }, disabled: isConversationBusy || isUpdatingModel, className: "h-8 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] px-3 text-[11px] text-[var(--text-secondary)]", children: [_jsx("option", { value: "", children: "Auto" }), availableModels.map((availableModel) => (_jsx("option", { value: availableModel, children: availableModel }, availableModel)))] }), _jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "inline-flex h-8 w-8 items-center justify-center rounded-full text-[var(--text-tertiary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-secondary)]", children: "\u21BA" })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 min-h-[180px] bg-[var(--bg-surface)]", ref: messagesContainerRef, onScroll: updatePinnedState, children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || _jsx(EmptyState, { onSendMessage: (message) => { void controller.sendMessage(message); } })) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "flex justify-center py-6", children: _jsx("span", { className: "text-[var(--text-tertiary)] text-sm", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "flex justify-center py-1", children: _jsx("span", { className: "text-[var(--text-tertiary)] text-xs", children: "Loading older\u2026" }) })) : null, displayMessageRows.map((row, index) => {
+                        }) })] })) : null, _jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "h-7 w-7 rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] flex items-center justify-center shadow-[var(--shadow-xs)]", children: _jsx("span", { className: "text-[var(--text-on-brand)] text-xs", children: "\u2728" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-[var(--text-primary)] text-[13px] leading-tight", children: title }), _jsx("p", { className: "text-[11px] text-[var(--text-tertiary)]", children: subtitle })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("select", { value: controller.conversationModel || "", onChange: (event) => { void handleModelChange(event.target.value || null); }, disabled: isConversationBusy || isUpdatingModel, className: "h-8 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] px-3 text-[11px] text-[var(--text-secondary)]", children: [_jsx("option", { value: "", children: "Auto" }), availableModels.map((availableModel) => (_jsx("option", { value: availableModel, children: availableModel }, availableModel)))] }), _jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "inline-flex h-8 w-8 items-center justify-center rounded-full text-[var(--text-tertiary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-secondary)]", children: "\u21BA" })] })] }), _jsxs(AssistantMessageViewport, { className: "min-h-[180px]", ref: messagesContainerRef, onScroll: updatePinnedState, children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || _jsx(EmptyState, { onSendMessage: (message) => { void controller.sendMessage(message); } })) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "flex justify-center py-6", children: _jsx("span", { className: "text-[var(--text-tertiary)] text-sm", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "flex justify-center py-1", children: _jsx("span", { className: "text-[var(--text-tertiary)] text-xs", children: "Loading older\u2026" }) })) : null, displayMessageRows.map((row, index) => {
                                         const previousRow = index > 0 ? displayMessageRows[index - 1] : null;
                                         const showAssistantHeader = row.message.role !== "assistant"
                                             ? false
                                             : previousRow?.message.role !== "assistant";
                                         const includesLastRawMessage = row.sourceIndexes.includes(controller.messages.length - 1);
                                         return (_jsx(MessageGroup, { message: row.message, onNavigateResource: onNavigateResource, onWidgetSendPrompt: handleWidgetSendPrompt, conversationId: controller.activeConversationId, isStreaming: isConversationBusy && includesLastRawMessage && row.message.role === "assistant", showAssistantHeader: showAssistantHeader, renderMessageContent: renderMessageContent, renderPresentedFile: renderPresentedFile, renderToolInvocation: renderToolInvocation }, row.id || index));
-                                    }), isConversationBusy && controller.messages.length > 0 && !activeToolBanner && !lastMessageHasContent ? (_jsx(ThinkingIndicator, {})) : null, controller.error ? (_jsx("div", { className: "bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] border border-[color:color-mix(in_srgb,_var(--state-error)_48%,_var(--border-subtle))] rounded-lg p-3 text-xs text-[var(--state-error)] flex items-start gap-2.5", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Something went wrong" }), _jsx("p", { className: "text-[var(--state-error)] mt-1", children: controller.error })] }) })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "h-14 shrink-0" })) : null] })] }), _jsxs("div", { className: "relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", children: [planSummary ? (_jsx("div", { className: "absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "inline-flex items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)] transition-colors", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) })) })) : null, isConversationBusy && activeToolBanner ? (_jsx("div", { className: "px-2 pb-1", children: _jsx("div", { className: "inline-flex max-w-full items-center gap-1.5 text-[11px] text-[var(--text-tertiary)] animate-in fade-in duration-200", children: _jsx("span", { className: "truncate", children: activeToolBanner.summary }) }) })) : null, activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-[11px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]", children: ["Question ", effectiveAskOverlayState.currentQuestionIndex + 1, " of ", pendingAskUserInput.questions.length] }), _jsx("p", { className: "mt-1 text-[14px] font-medium text-[var(--text-primary)] leading-6", children: activeAskQuestion.question })] }), _jsx("button", { type: "button", onClick: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), className: "rounded-md px-2 py-1 text-[12px] text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)] transition-colors", children: "Skip" })] }), _jsx("div", { className: "max-h-[260px] overflow-y-auto space-y-1.5 pr-1", children: activeAskQuestion.options.map((option, optionIndex) => {
-                                            const isSelected = activeAskAnswers.includes(option);
-                                            const rankLabel = activeAskQuestion.type === "rank_priorities" && isSelected
-                                                ? activeAskAnswers.indexOf(option) + 1
-                                                : null;
-                                            return (_jsx("button", { type: "button", onClick: () => updateAskAnswer(option), className: cx("w-full rounded-lg border px-2.5 py-2 text-left text-[13px] transition-colors", isSelected
-                                                    ? "border-[color:color-mix(in_srgb,_var(--brand-primary)_64%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-primary)_14%,_transparent)] text-[var(--text-primary)]"
-                                                    : "border-[var(--border-default)] bg-[var(--bg-canvas)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)]"), children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [rankLabel ? (_jsx("span", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--brand-primary)] px-1 text-[10px] font-semibold text-[var(--text-on-brand)]", children: rankLabel })) : (_jsx("span", { className: cx("inline-block h-2.5 w-2.5 rounded-full border", isSelected
-                                                                ? "border-[var(--brand-primary)] bg-[var(--brand-primary)]"
-                                                                : "border-[var(--border-default)] bg-transparent") })), option] }) }, `${option}-${optionIndex}`));
-                                        }) }), (activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1) ? (_jsx("div", { className: "flex justify-end", children: _jsx("button", { type: "button", onClick: continueAskQuestions, disabled: !canContinueAsk, className: cx("rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors", canContinueAsk
-                                                ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
-                                                : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), children: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue" }) })) : null] })) : (_jsxs("div", { className: "space-y-1.5", children: [controller.pendingFiles.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-1", children: controller.pendingFiles.map((file) => {
+                                    }), isConversationBusy && controller.messages.length > 0 && !activeToolBanner && !lastMessageHasContent ? (_jsx(ThinkingIndicator, {})) : null, controller.error ? (_jsx("div", { className: "bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] border border-[color:color-mix(in_srgb,_var(--state-error)_48%,_var(--border-subtle))] rounded-lg p-3 text-xs text-[var(--state-error)] flex items-start gap-2.5", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Something went wrong" }), _jsx("p", { className: "text-[var(--state-error)] mt-1", children: controller.error })] }) })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "h-14 shrink-0" })) : null] })] }), _jsxs("div", { className: "relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", children: [planSummary ? (_jsx("div", { className: "absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "inline-flex items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)] transition-colors", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) })) })) : null, isConversationBusy && activeToolBanner ? (_jsx("div", { className: "px-2 pb-1", children: _jsx("div", { className: "inline-flex max-w-full items-center gap-1.5 text-[11px] text-[var(--text-tertiary)] animate-in fade-in duration-200", children: _jsx("span", { className: "truncate", children: activeToolBanner.summary }) }) })) : null, activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsx(AssistantAskOverlay, { questionNumber: effectiveAskOverlayState.currentQuestionIndex + 1, totalQuestions: pendingAskUserInput.questions.length, question: activeAskQuestion.question, options: activeAskQuestion.options, selectedOptions: activeAskAnswers, canContinue: canContinueAsk, continueLabel: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue", onSelectOption: updateAskAnswer, onContinue: activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1 ? continueAskQuestions : undefined, onSkip: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), mode: activeAskQuestion.type })) : (_jsxs("div", { className: "space-y-1.5", children: [controller.pendingFiles.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-1", children: controller.pendingFiles.map((file) => {
                                             const fileKey = `${file.name}:${file.size}:${file.lastModified}`;
                                             return (_jsx("div", { children: renderPendingFile({
                                                     file,

package/dist/react/index.d.ts

@@ -13,8 +13,12 @@ export type { UseAssistantRuntimeOptions, UseAssistantRuntimeResult, } from "./u
 export { useAssistantController } from "./useAssistantController.js";
 export type { AssistantAction, AssistantConversationScope, AssistantMessagePart, AssistantRenderableMessage, AssistantToolInvocation, UseAssistantControllerOptions, UseAssistantControllerResult, } from "./useAssistantController.js";
 export type { AssistantConversationRenderArgs, AssistantControllerView, AssistantExperienceCustomizationProps, AssistantMessageRenderArgs, AssistantPendingFileRenderArgs, AssistantPresentedFileRenderArgs, AssistantToolRenderArgs, } from "./components/assistant-types.js";
+export { AssistantAskOverlay, AssistantComposer, AssistantConversationList, AssistantHeader, AssistantMessageViewport, AssistantModelPicker, AssistantPendingFileChip, AssistantShellLayout, AssistantStatusPill, } from "./components/AssistantChrome.js";
+export type { AssistantAskOverlayProps, AssistantComposerProps, AssistantConversationListProps, AssistantHeaderProps, AssistantMessageViewportProps, AssistantModelPickerProps, AssistantPendingFileChipProps, AssistantShellLayoutProps, AssistantStatusPillProps, } from "./components/AssistantChrome.js";
 export { AssistantExperienceView } from "./components/AssistantExperience.js";
 export type { ActiveToolBanner, AskUserInputQuestion, AssistantExperienceViewProps, DisplayMessageRow, PendingAskUserInput, PlanStepState, PlanSummaryState, } from "./components/AssistantExperience.js";
+export { AssistantEmbedded } from "./components/AssistantEmbedded.js";
+export type { AssistantEmbeddedProps } from "./components/AssistantEmbedded.js";
 export { buildDisplayMessageRows, dedupToolInvocations, EmptyState, findPendingAskUserInput, formatAskUserInputAnswers, getActiveToolBanner, extractPresentFilePathsFromInvocation, latestPlanSummary, MessageGroup, PlanSummaryStrip, ThinkingIndicator, } from "./components/AssistantExperience.js";
 export { useTaskSession } from "./useTaskSession.js";
 export type { CreateTaskInput, UseTaskSessionOptions, UseTaskSessionResult, } from "./useTaskSession.js";

package/dist/react/index.js

@@ -5,7 +5,9 @@ export { useAssistantRun } from "./useAssistantRun.js";
 export { useAssistantSession } from "./useAssistantSession.js";
 export { useAssistantRuntime } from "./useAssistantRuntime.js";
 export { useAssistantController } from "./useAssistantController.js";
+export { AssistantAskOverlay, AssistantComposer, AssistantConversationList, AssistantHeader, AssistantMessageViewport, AssistantModelPicker, AssistantPendingFileChip, AssistantShellLayout, AssistantStatusPill, } from "./components/AssistantChrome.js";
 export { AssistantExperienceView } from "./components/AssistantExperience.js";
+export { AssistantEmbedded } from "./components/AssistantEmbedded.js";
 export { buildDisplayMessageRows, dedupToolInvocations, EmptyState, findPendingAskUserInput, formatAskUserInputAnswers, getActiveToolBanner, extractPresentFilePathsFromInvocation, latestPlanSummary, MessageGroup, PlanSummaryStrip, ThinkingIndicator, } from "./components/AssistantExperience.js";
 export { useTaskSession } from "./useTaskSession.js";
 export { useFunctionSession } from "./useFunctionSession.js";

package/dist/react/useAssistantController.js

@@ -708,14 +708,16 @@ export function useAssistantController({ client, podId, assistantId, organizatio
     }, [conversations]);
     useEffect(() => {
         const conversationId = activeConversationIdRef.current;
-        if (!conversationId)
-            return;
-        if (!runtimeMessages || runtimeMessages.length === 0)
+        if (!conversationId) {
+            setMessages([]);
             return;
+        }
         const normalized = sortMessagesByCreatedAt(runtimeMessages)
-            .filter((message) => !message.conversation_id || message.conversation_id === conversationId);
-        if (normalized.length === 0)
+            .filter((message) => message.conversation_id === conversationId);
+        if (normalized.length === 0) {
+            setMessages([]);
             return;
+        }
         const nextMessages = mapConversationMessages(normalized);
         const pendingText = sessionStreamingText.trim();
         if (pendingText.length > 0) {

package/dist/react/useAssistantRuntime.js

@@ -43,8 +43,15 @@ function upsertRuntimeMessage(previous, incoming) {
     next.push(incoming);
     return next;
 }
-function toRuntimeMessage(message) {
-    return message;
+function toRuntimeMessage(message, fallbackConversationId) {
+    const runtimeMessage = message;
+    if (runtimeMessage.conversation_id || !fallbackConversationId) {
+        return runtimeMessage;
+    }
+    return {
+        ...runtimeMessage,
+        conversation_id: fallbackConversationId,
+    };
 }
 function buildOptimisticId() {
     if (typeof globalThis.crypto !== "undefined" && typeof globalThis.crypto.randomUUID === "function") {
@@ -56,16 +63,16 @@ export function useAssistantRuntime({ conversationId = null, sessionMessages = [
     const [runtimeMessages, setRuntimeMessages] = useState([]);
     const mergeMessages = useCallback((messages) => {
         setRuntimeMessages((previous) => {
-            const merged = messages.reduce((accumulator, message) => upsertRuntimeMessage(accumulator, toRuntimeMessage(message)), previous);
+            const merged = messages.reduce((accumulator, message) => upsertRuntimeMessage(accumulator, toRuntimeMessage(message, conversationId)), previous);
             return [...merged].sort((a, b) => messageTime(a) - messageTime(b));
         });
-    }, []);
+    }, [conversationId]);
     const replaceLoadedMessages = useCallback((messages) => {
-        setRuntimeMessages((previous) => {
-            const next = messages.reduce((accumulator, message) => upsertRuntimeMessage(accumulator, toRuntimeMessage(message)), previous);
-            return [...next].sort((a, b) => messageTime(a) - messageTime(b));
-        });
-    }, []);
+        const normalized = messages
+            .map((message) => toRuntimeMessage(message, conversationId))
+            .filter((message) => !conversationId || message.conversation_id === conversationId);
+        setRuntimeMessages([...normalized].sort((a, b) => messageTime(a) - messageTime(b)));
+    }, [conversationId]);
     const appendOptimisticUserMessage = useCallback((content, options) => {
         const trimmed = content.trim();
         const optimisticConversationId = options?.conversationId ?? conversationId ?? undefined;
@@ -98,8 +105,8 @@ export function useAssistantRuntime({ conversationId = null, sessionMessages = [
         if (sessionMessages.length === 0)
             return;
         const normalized = sessionMessages
-            .map((message) => toRuntimeMessage(message))
-            .filter((message) => !conversationId || !message.conversation_id || message.conversation_id === conversationId);
+            .map((message) => toRuntimeMessage(message, conversationId))
+            .filter((message) => !conversationId || message.conversation_id === conversationId);
         if (normalized.length === 0)
             return;
         mergeMessages(normalized);

package/dist/react/useAssistantSession.js

@@ -57,6 +57,7 @@ export function useAssistantSession(options) {
     const [isStreaming, setIsStreaming] = useState(false);
     const [error, setError] = useState(null);
     const abortRef = useRef(null);
+    const conversationIdRef = useRef(externalConversationId);
     const statusRef = useRef(undefined);
     const streamingTextRef = useRef("");
     const autoResumedKeyRef = useRef(null);
@@ -65,20 +66,30 @@ export function useAssistantSession(options) {
     const onMessageRef = useRef(onMessage);
     const onErrorRef = useRef(onError);
     const setConversationId = useCallback((nextConversationId) => {
-        setConversationIdState(nextConversationId);
-        autoResumedKeyRef.current = null;
-        streamingTextRef.current = "";
-        setStreamingText("");
-        if (!nextConversationId) {
+        abortRef.current?.abort();
+        abortRef.current = null;
+        setConversationIdState((currentConversationId) => {
+            if (currentConversationId === nextConversationId) {
+                return currentConversationId;
+            }
+            autoResumedKeyRef.current = null;
+            streamingTextRef.current = "";
+            setStreamingText("");
             setConversation(null);
             setStatus(undefined);
             statusRef.current = undefined;
             setMessages([]);
-        }
+            setError(null);
+            setIsStreaming(false);
+            return nextConversationId;
+        });
     }, []);
     useEffect(() => {
-        setConversationIdState(externalConversationId);
-    }, [externalConversationId]);
+        setConversationId(externalConversationId);
+    }, [externalConversationId, setConversationId]);
+    useEffect(() => {
+        conversationIdRef.current = conversationId;
+    }, [conversationId]);
     useEffect(() => {
         onEventRef.current = onEvent;
     }, [onEvent]);
@@ -206,6 +217,13 @@ export function useAssistantSession(options) {
                 page_token: input.pageToken,
             });
             const nextMessages = response.items ?? [];
+            if (conversationIdRef.current !== id) {
+                return {
+                    items: nextMessages,
+                    limit: response.limit ?? input.limit ?? 20,
+                    next_page_token: response.next_page_token,
+                };
+            }
             setMessages((previous) => nextMessages.reduce((accumulator, message) => upsertConversationMessage(accumulator, message), previous));
             return {
                 items: nextMessages,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemma-sdk",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "Official TypeScript SDK for Lemma pod-scoped APIs",
   "type": "module",
   "main": "dist/index.js",