lemma-sdk 0.2.18 → 0.2.20

package/README.md

@@ -179,7 +179,32 @@ Import the bundled stylesheet once anywhere in your app:
 import "lemma-sdk/react/styles.css";
 ```
 
-The stylesheet includes the SDK theme tokens and semantic assistant classes. You do not need the Lemma app's internal Tailwind setup just to render the assistant correctly.
+The stylesheet includes the SDK theme tokens and the complete semantic assistant UI. The assistant components do not depend on the host app's Tailwind version or Tailwind content scanning.
+
+If you alias the package to local SDK source in Vite, make sure the alias points at the React source and stylesheet:
+
+```ts
+// vite.config.ts
+import path from "node:path";
+
+export default {
+  resolve: {
+    alias: {
+      "lemma-sdk/react/styles.css": path.resolve(__dirname, "../lemma-typescript/src/react/styles.css"),
+      "lemma-sdk/react": path.resolve(__dirname, "../lemma-typescript/src/react/index.ts"),
+      "lemma-sdk": path.resolve(__dirname, "../lemma-typescript/src/index.ts"),
+    },
+  },
+};
+```
+
+Quick checklist for developers:
+
+- import `lemma-sdk/react/styles.css` once
+- give the assistant container a real height
+- if the assistant is inside flex/grid, add `min-height: 0` on the relevant parent
+- if you use `AssistantEmbedded`, pass `theme` directly there
+- if you use `AssistantExperienceView`, wrap it in `AssistantThemeScope`
 
 The assistant UI renders markdown by default:
 
@@ -188,11 +213,22 @@ The assistant UI renders markdown by default:
 - links open safely in a new tab by default
 - lists, tables, blockquotes, inline code, and fenced code blocks are styled out of the box
 
+#### Recommended path
+
+For most apps, start with `AssistantEmbedded`.
+
+- use `AssistantEmbedded` when you want the SDK to handle the controller lifecycle and render the ready-made assistant UI
+- use `AssistantExperienceView` when you still want the SDK's default assistant UI, but you need to own the controller lifecycle yourself
+- use `useAssistantController` plus primitives only when you are intentionally building a custom shell or custom layout
+
+If you are unsure, use `AssistantEmbedded` first. It is the path we recommend and the one we expect most SDK consumers to ship.
+
 #### Choose an integration level
 
 ##### 1. `AssistantEmbedded` for the fastest setup
 
 Use `AssistantEmbedded` when you want a ready-made assistant surface with the SDK defaults.
+This is the recommended integration for most users.
 
 ```tsx
 import "lemma-sdk/react/styles.css";
@@ -208,7 +244,14 @@ function SupportAssistant() {
         title="Support Assistant"
         subtitle="Ask questions about this pod."
         placeholder="Message Support Assistant"
+        emptyStateSuggestions={[
+          { text: "Summarize this conversation", icon: "✦" },
+          { text: "Help me draft a response", icon: "✎" },
+          { text: "List the next steps", icon: "→" },
+        ]}
         showConversationList
+        showModelPicker={false}
+        radius="lg"
         theme="auto"
       />
     </div>
@@ -219,13 +262,18 @@ function SupportAssistant() {
 Important notes:
 
 - `theme` accepts `"auto" | "light" | "dark"`
+- `radius` lets you pick the built-in rounding scale from `"none"` through `"xl"`
+- `showModelPicker={false}` hides the built-in model chooser when you do not want model controls visible
 - `theme="auto"` follows the host app when it uses common selectors like `.dark`, `[data-theme="dark"]`, `[data-mode="dark"]`, and also falls back to `prefers-color-scheme`
 - the parent container must have a real height; if it lives inside flex/grid, `min-height: 0` is usually needed too
 - attachments are queued into the composer and sent with the next message by default
+- `emptyStateSuggestions` lets you replace the built-in prompt chips shown before the first message
+- prefer this component unless you specifically need to own controller state or replace the built-in layout
 
 ##### 2. `AssistantExperienceView` for the default UI with your own controller
 
 Use `AssistantExperienceView` when you want the built-in assistant layout, but you need to own the controller lifecycle yourself.
+This is the second-best default when `AssistantEmbedded` is too opinionated for your integration.
 
 ```tsx
 import "lemma-sdk/react/styles.css";
@@ -249,6 +297,11 @@ function ControlledAssistant() {
         title="Support Assistant"
         subtitle="Direct use of the default assistant experience."
         placeholder="Message Support Assistant"
+        emptyStateSuggestions={[
+          { text: "Summarize the current context" },
+          { text: "Help me write a reply" },
+          { text: "What should I do next?" },
+        ]}
         showConversationList
         chromeStyle="subtle"
         statusPlacement="inline"
@@ -263,13 +316,19 @@ Useful props on `AssistantExperienceView`:
 - `showConversationList`: show the built-in conversation sidebar
 - `chromeStyle`: `"elevated" | "subtle" | "flat"`
 - `statusPlacement`: `"inline" | "composer" | "none"`
+- `radius`: `"none" | "sm" | "md" | "lg" | "xl"`
+- `showModelPicker`: show or hide the built-in model selector
+- `showNewConversationButton`: show or hide the built-in reset/new-conversation button
+- `emptyStateSuggestions`: replace the built-in generic prompt suggestions used by the default empty state
 - `renderMessageContent`: override markdown rendering for custom message content
 - `renderToolInvocation`: replace the default tool activity renderer
 - `renderPresentedFile` and `renderPendingFile`: customize attachment rendering
+- prefer this over building from primitives if you still want the SDK's default assistant experience
 
 ##### 3. `useAssistantController` + primitives for a custom shell
 
 Use the primitives when you want full control over layout and app chrome.
+This is the advanced path and should be the exception, not the starting point.
 
 ```tsx
 import "lemma-sdk/react/styles.css";
@@ -279,6 +338,7 @@ import {
   AssistantMessageViewport,
   AssistantShellLayout,
   AssistantThemeScope,
+  EmptyState,
   MessageGroup,
   PlanSummaryStrip,
   ThinkingIndicator,
@@ -313,6 +373,19 @@ function CustomAssistantShell() {
             {activeToolBanner ? <div>{activeToolBanner.summary}</div> : null}
 
             <AssistantMessageViewport>
+              {assistant.messages.length === 0 ? (
+                <EmptyState
+                  suggestions={[
+                    { text: "Summarize this for me" },
+                    { text: "Help me draft a reply" },
+                    { text: "Brainstorm next steps" },
+                  ]}
+                  onSendMessage={(text) => {
+                    void assistant.sendMessage(text);
+                  }}
+                />
+              ) : null}
+
               {rows.map((row, index) => (
                 <MessageGroup
                   key={row.id}
@@ -355,6 +428,14 @@ Useful primitives exported from `lemma-sdk/react`:
 - `PlanSummaryStrip`
 - `ThinkingIndicator`
 
+Guidance:
+
+- prefer `AssistantEmbedded` over this path when the SDK layout is acceptable
+- prefer `AssistantExperienceView` over this path when you only need controller ownership, theming control, or a few render overrides
+- reach for primitives only when you are replacing the layout itself or deeply integrating the assistant into app-specific chrome
+
+Default empty-state suggestions are intentionally generic so they work across support, internal tools, content, and general assistant use cases. Override them with `emptyStateSuggestions` when you want task-specific prompts.
+
 #### Theming
 
 Use `AssistantThemeScope` around custom assistant layouts:

package/dist/openapi_client/index.d.ts

@@ -103,6 +103,7 @@ export type { FunctionRunListResponse } from './models/FunctionRunListResponse.j
 export type { FunctionRunResponse } from './models/FunctionRunResponse.js';
 export { FunctionRunStatus } from './models/FunctionRunStatus.js';
 export { FunctionStatus } from './models/FunctionStatus.js';
+export { FunctionType } from './models/FunctionType.js';
 export type { HTTPValidationError } from './models/HTTPValidationError.js';
 export type { IconUploadRequest } from './models/IconUploadRequest.js';
 export type { IconUploadResponse } from './models/IconUploadResponse.js';

package/dist/openapi_client/index.js

@@ -18,6 +18,7 @@ export { FlowRunStatus } from './models/FlowRunStatus.js';
 export { FlowStartType } from './models/FlowStartType.js';
 export { FunctionRunStatus } from './models/FunctionRunStatus.js';
 export { FunctionStatus } from './models/FunctionStatus.js';
+export { FunctionType } from './models/FunctionType.js';
 export { OrganizationInvitationStatus } from './models/OrganizationInvitationStatus.js';
 export { OrganizationRole } from './models/OrganizationRole.js';
 export { PodAppMode } from './models/PodAppMode.js';

package/dist/openapi_client/models/BulkCreateRecordsRequest.d.ts

@@ -6,4 +6,8 @@ export type BulkCreateRecordsRequest = {
      * List of record payload objects to insert.
      */
     records: Array<Record<string, any>>;
+    /**
+     * When true, insert records and update existing rows that conflict on the table primary key.
+     */
+    upsert?: boolean;
 };

package/dist/openapi_client/models/CreateFunctionRequest.d.ts

@@ -1,4 +1,5 @@
 import type { ApplicationAccessConfig } from './ApplicationAccessConfig.js';
+import type { FunctionType } from './FunctionType.js';
 import type { TableAccessEntry } from './TableAccessEntry.js';
 /**
  * Request to create a function.
@@ -15,4 +16,5 @@ export type CreateFunctionRequest = {
     input_schema?: Record<string, any>;
     name: string;
     output_schema?: Record<string, any>;
+    type?: FunctionType;
 };

package/dist/openapi_client/models/FunctionResponse.d.ts

@@ -1,5 +1,6 @@
 import type { ApplicationAccessConfig } from './ApplicationAccessConfig.js';
 import type { FunctionStatus } from './FunctionStatus.js';
+import type { FunctionType } from './FunctionType.js';
 import type { TableAccessEntry } from './TableAccessEntry.js';
 /**
  * Function response.
@@ -21,6 +22,7 @@ export type FunctionResponse = {
     output_schema: Record<string, any>;
     pod_id: string;
     status: FunctionStatus;
+    type: FunctionType;
     updated_at: any;
     user_id: string;
 };

package/dist/openapi_client/models/FunctionRunResponse.d.ts

@@ -9,9 +9,11 @@ export type FunctionRunResponse = {
     function_id: string;
     id: string;
     input_data?: (Record<string, any> | null);
+    job_id?: (string | null);
     logs?: (string | null);
     output_data?: (Record<string, any> | null);
     started_at: any;
     status: FunctionRunStatus;
+    user_email?: (string | null);
     user_id: string;
 };

package/dist/openapi_client/models/FunctionType.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Execution mode for a function.
+ */
+export declare enum FunctionType {
+    API = "API",
+    JOB = "JOB"
+}

package/dist/openapi_client/models/FunctionType.js

@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Execution mode for a function.
+ */
+export var FunctionType;
+(function (FunctionType) {
+    FunctionType["API"] = "API";
+    FunctionType["JOB"] = "JOB";
+})(FunctionType || (FunctionType = {}));

package/dist/openapi_client/models/UpdateFunctionRequest.d.ts

@@ -1,4 +1,5 @@
 import type { ApplicationAccessConfig } from './ApplicationAccessConfig.js';
+import type { FunctionType } from './FunctionType.js';
 import type { TableAccessEntry } from './TableAccessEntry.js';
 /**
  * Request to update a function.
@@ -11,4 +12,5 @@ export type UpdateFunctionRequest = {
     config?: (Record<string, any> | null);
     description?: (string | null);
     icon_url?: (string | null);
+    type?: (FunctionType | null);
 };

package/dist/react/components/AssistantChrome.js

@@ -7,52 +7,42 @@ export function AssistantThemeScope({ className, children, theme = "auto", ...pr
     return (_jsx("div", { "data-lemma-theme": theme, className: cx("lemma-assistant-theme", className), ...props, children: children }));
 }
 export const AssistantMessageViewport = forwardRef(function AssistantMessageViewport({ className, innerClassName, children, ...props }, ref) {
-    return (_jsx("div", { ref: ref, className: cx("lemma-assistant-viewport", "min-h-0 flex-1 overflow-y-auto bg-[var(--bg-surface)] px-4 py-4", className), ...props, children: _jsx("div", { className: cx("lemma-assistant-viewport-inner", "mx-auto flex w-full max-w-5xl flex-col gap-3", innerClassName), children: children }) }));
+    return (_jsx("div", { ref: ref, className: cx("lemma-assistant-viewport", className), ...props, children: _jsx("div", { className: cx("lemma-assistant-viewport-inner", innerClassName), children: children }) }));
 });
 export function AssistantShellLayout({ sidebar, sidebarVisible = false, main, className, }) {
     const hasSidebar = !!sidebar;
-    return (_jsxs("div", { className: cx("lemma-assistant-shell", hasSidebar && "lemma-assistant-shell--with-sidebar", hasSidebar && sidebarVisible && "lemma-assistant-shell--sidebar-visible", "mx-auto h-full w-full min-h-0 font-sans antialiased", className), children: [sidebar && sidebarVisible ? (_jsx("div", { className: "lemma-assistant-shell-sidebar", children: sidebar })) : null, main] }));
+    return (_jsxs("div", { className: cx("lemma-assistant-shell", hasSidebar && "lemma-assistant-shell--with-sidebar", hasSidebar && sidebarVisible && "lemma-assistant-shell--sidebar-visible", className), children: [sidebar && sidebarVisible ? (_jsx("div", { className: "lemma-assistant-shell-sidebar", children: sidebar })) : null, main] }));
 }
 export function AssistantHeader({ title, subtitle, badge, controls, tone = "subtle", className, }) {
-    return (_jsxs("div", { "data-tone": tone, className: cx("lemma-assistant-header", "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: "lemma-assistant-header-copy flex items-center gap-2.5", children: [badge ? (_jsx("div", { className: "lemma-assistant-header-badge 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", { className: "lemma-assistant-header-titles", children: [_jsx("h3", { className: "lemma-assistant-header-title text-[13px] font-semibold leading-tight text-[var(--text-primary)]", children: title }), subtitle ? (_jsx("p", { className: "lemma-assistant-header-subtitle text-[11px] text-[var(--text-tertiary)]", children: subtitle })) : null] })] }), controls ? (_jsx("div", { className: "lemma-assistant-header-controls flex items-center gap-1", children: controls })) : null] }));
+    return (_jsxs("div", { "data-tone": tone, className: cx("lemma-assistant-header", className), children: [_jsxs("div", { className: "lemma-assistant-header-copy", children: [badge ? (_jsx("div", { className: "lemma-assistant-header-badge", children: badge })) : null, _jsxs("div", { className: "lemma-assistant-header-titles", children: [_jsx("h3", { className: "lemma-assistant-header-title", children: title }), subtitle ? (_jsx("p", { className: "lemma-assistant-header-subtitle", children: subtitle })) : null] })] }), controls ? (_jsx("div", { className: "lemma-assistant-header-controls", children: controls })) : null] }));
 }
 export function AssistantConversationList({ conversations, activeConversationId, onSelectConversation, onNewConversation, renderConversationLabel, title = "Conversations", newLabel = "New", className, }) {
-    return (_jsxs("aside", { className: cx("lemma-assistant-conversation-list", "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: "lemma-assistant-conversation-list-header border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: _jsxs("div", { className: "lemma-assistant-conversation-list-header-row flex items-center justify-between gap-3", children: [_jsxs("div", { className: "lemma-assistant-conversation-list-copy", children: [_jsx("div", { className: "lemma-assistant-conversation-list-title text-[13px] font-semibold text-[var(--text-primary)]", children: title }), _jsxs("div", { className: "lemma-assistant-conversation-list-meta mt-1 text-[11px] text-[var(--text-tertiary)]", children: [conversations.length, " total"] })] }), onNewConversation ? (_jsx("button", { type: "button", onClick: onNewConversation, className: "lemma-assistant-conversation-list-new 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: "lemma-assistant-conversation-list-items min-h-0 flex-1 overflow-y-auto p-3 space-y-2", children: conversations.map((conversation) => {
+    return (_jsxs("aside", { className: cx("lemma-assistant-conversation-list", className), children: [_jsx("div", { className: "lemma-assistant-conversation-list-header", children: _jsxs("div", { className: "lemma-assistant-conversation-list-header-row", children: [_jsxs("div", { className: "lemma-assistant-conversation-list-copy", children: [_jsx("div", { className: "lemma-assistant-conversation-list-title", children: title }), _jsxs("div", { className: "lemma-assistant-conversation-list-meta", children: [conversations.length, " total"] })] }), onNewConversation ? (_jsx("button", { type: "button", onClick: onNewConversation, className: "lemma-assistant-conversation-list-new", children: newLabel })) : null] }) }), _jsx("div", { className: "lemma-assistant-conversation-list-items", children: conversations.map((conversation) => {
                     const isActive = conversation.id === activeConversationId;
-                    return (_jsxs("button", { type: "button", onClick: () => onSelectConversation(conversation.id), className: cx("lemma-assistant-conversation-list-item", "w-full rounded-xl border px-3 py-2.5 text-left transition-colors", isActive
-                            ? "lemma-assistant-conversation-list-item-active 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: "lemma-assistant-conversation-list-item-title truncate text-[12px] font-medium text-[var(--text-primary)]", children: renderConversationLabel
+                    return (_jsxs("button", { type: "button", onClick: () => onSelectConversation(conversation.id), className: cx("lemma-assistant-conversation-list-item", isActive && "lemma-assistant-conversation-list-item-active"), children: [_jsx("div", { className: "lemma-assistant-conversation-list-item-title", children: renderConversationLabel
                                     ? renderConversationLabel({ conversation, isActive })
-                                    : (conversation.title || "Untitled conversation") }), _jsx("div", { className: "lemma-assistant-conversation-list-item-status mt-1 text-[10px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]", children: (conversation.status || "waiting").toLowerCase() })] }, conversation.id));
+                                    : (conversation.title || "Untitled conversation") }), _jsx("div", { className: "lemma-assistant-conversation-list-item-status", 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("lemma-assistant-model-picker", "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)))] }));
+    return (_jsxs("select", { value: value ?? autoValue, onChange: (event) => onChange(event.target.value === autoValue ? null : event.target.value), disabled: disabled, className: cx("lemma-assistant-model-picker", 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: "lemma-assistant-ask-overlay space-y-2", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-header flex items-start justify-between gap-3", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-copy", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-kicker text-[11px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]", children: ["Question ", questionNumber, " of ", totalQuestions] }), _jsx("p", { className: "lemma-assistant-ask-overlay-question mt-1 text-[14px] font-medium leading-6 text-[var(--text-primary)]", children: question })] }), onSkip ? (_jsx("button", { type: "button", onClick: onSkip, className: "lemma-assistant-ask-overlay-skip 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: "lemma-assistant-ask-overlay-options max-h-[260px] space-y-1.5 overflow-y-auto pr-1", children: options.map((option, optionIndex) => {
+    return (_jsxs("div", { className: "lemma-assistant-ask-overlay", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-header", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-copy", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-kicker", children: ["Question ", questionNumber, " of ", totalQuestions] }), _jsx("p", { className: "lemma-assistant-ask-overlay-question", children: question })] }), onSkip ? (_jsx("button", { type: "button", onClick: onSkip, className: "lemma-assistant-ask-overlay-skip", children: "Skip" })) : null] }), _jsx("div", { className: "lemma-assistant-ask-overlay-options", 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("lemma-assistant-ask-overlay-option", "w-full rounded-lg border px-2.5 py-2 text-left text-[13px] transition-colors", isSelected
-                            ? "lemma-assistant-ask-overlay-option-selected 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: "lemma-assistant-ask-overlay-option-label 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: "lemma-assistant-ask-overlay-actions flex justify-end", children: _jsx("button", { type: "button", onClick: onContinue, disabled: !canContinue, className: cx("lemma-assistant-ask-overlay-continue", "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] }));
+                    return (_jsx("button", { type: "button", onClick: () => onSelectOption(option), className: cx("lemma-assistant-ask-overlay-option", isSelected && "lemma-assistant-ask-overlay-option-selected"), children: _jsxs("span", { className: "lemma-assistant-ask-overlay-option-label", children: [rankLabel ? (_jsx("span", { className: "lemma-assistant-ask-overlay-option-rank", children: rankLabel })) : (_jsx("span", { className: cx("lemma-assistant-ask-overlay-option-indicator", isSelected && "lemma-assistant-ask-overlay-option-indicator-selected") })), option] }) }, `${option}-${optionIndex}`));
+                }) }), onContinue ? (_jsx("div", { className: "lemma-assistant-ask-overlay-actions", children: _jsx("button", { type: "button", onClick: onContinue, disabled: !canContinue, className: cx("lemma-assistant-ask-overlay-continue", canContinue && "lemma-assistant-ask-overlay-continue-enabled"), children: continueLabel }) })) : null] }));
 }
 export function AssistantComposer({ floating, status, pendingFiles, children, tone = "default", className, }) {
-    return (_jsxs("div", { "data-tone": tone, "data-has-status": status ? "true" : "false", "data-has-pending-files": pendingFiles ? "true" : "false", "data-has-floating": floating ? "true" : "false", className: cx("lemma-assistant-composer", "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: "lemma-assistant-composer-floating absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: floating })) : null, status ? (_jsx("div", { className: "lemma-assistant-composer-status-rail min-h-[34px] px-2 pb-1", children: _jsx("div", { className: "lemma-assistant-composer-status flex min-h-[26px] items-center transition-opacity duration-200", children: status }) })) : null, pendingFiles ? (_jsx("div", { className: "lemma-assistant-composer-pending flex flex-wrap items-center gap-1.5 px-1 pb-1.5", children: pendingFiles })) : null, _jsx("div", { className: "lemma-assistant-composer-body", children: children })] }));
+    return (_jsxs("div", { "data-tone": tone, "data-has-status": status ? "true" : "false", "data-has-pending-files": pendingFiles ? "true" : "false", "data-has-floating": floating ? "true" : "false", className: cx("lemma-assistant-composer", className), children: [floating ? (_jsx("div", { className: "lemma-assistant-composer-floating", children: floating })) : null, status ? (_jsx("div", { className: "lemma-assistant-composer-status-rail", children: _jsx("div", { className: "lemma-assistant-composer-status", children: status }) })) : null, pendingFiles ? (_jsx("div", { className: "lemma-assistant-composer-pending", children: pendingFiles })) : null, _jsx("div", { className: "lemma-assistant-composer-body", children: children })] }));
 }
 export function AssistantPendingFileChip({ label, onRemove, className, }) {
-    return (_jsxs("span", { className: cx("lemma-assistant-pending-file-chip", "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: "lemma-assistant-pending-file-chip-label truncate max-w-[180px]", children: label }), onRemove ? (_jsx("button", { type: "button", onClick: onRemove, className: "lemma-assistant-pending-file-chip-remove inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-[var(--bg-canvas)]", title: "Remove file", children: "\u00D7" })) : null] }));
+    return (_jsxs("span", { className: cx("lemma-assistant-pending-file-chip", className), children: [_jsx("span", { className: "lemma-assistant-pending-file-chip-label", children: label }), onRemove ? (_jsx("button", { type: "button", onClick: onRemove, className: "lemma-assistant-pending-file-chip-remove", title: "Remove file", children: "\u00D7" })) : null] }));
 }
 export function AssistantStatusPill({ label, subtle = false, className, }) {
-    return (_jsxs("div", { className: cx("lemma-assistant-status-pill", "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
-            ? "lemma-assistant-status-pill-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: "lemma-assistant-status-pill-dot relative inline-flex h-2.5 w-2.5 shrink-0", children: [_jsx("span", { className: "lemma-assistant-status-pill-dot-ping absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--brand-primary)]/45" }), _jsx("span", { className: "lemma-assistant-status-pill-dot-core relative inline-flex h-2.5 w-2.5 rounded-full bg-[var(--brand-primary)]" })] }), _jsx("span", { className: "lemma-assistant-status-pill-label truncate", children: label })] }));
+    return (_jsxs("div", { className: cx("lemma-assistant-status-pill", subtle && "lemma-assistant-status-pill-subtle", className), children: [_jsxs("span", { className: "lemma-assistant-status-pill-dot", children: [_jsx("span", { className: "lemma-assistant-status-pill-dot-ping" }), _jsx("span", { className: "lemma-assistant-status-pill-dot-core" })] }), _jsx("span", { className: "lemma-assistant-status-pill-label", children: label })] }));
 }

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

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { AssistantRenderableMessage, AssistantToolInvocation } from "../useAssistantController.js";
-import type { AssistantControllerView, AssistantConversationRenderArgs, AssistantMessageRenderArgs, AssistantPendingFileRenderArgs, AssistantPresentedFileRenderArgs, AssistantToolRenderArgs } from "./assistant-types.js";
+import type { AssistantControllerView, AssistantConversationRenderArgs, AssistantMessageRenderArgs, AssistantPendingFileRenderArgs, AssistantPresentedFileRenderArgs, AssistantToolRenderArgs, EmptyStateSuggestion } from "./assistant-types.js";
 type PlanStatus = "pending" | "in_progress" | "completed";
 export interface PlanStepState {
     step: string;
@@ -35,17 +35,22 @@ export interface ActiveToolBanner {
 }
 export type AssistantChromeStyle = "elevated" | "subtle" | "flat";
 export type AssistantStatusPlacement = "inline" | "composer" | "none";
+export type AssistantRadiusScale = "none" | "sm" | "md" | "lg" | "xl";
 export interface AssistantExperienceViewProps {
     controller: AssistantControllerView;
     title?: ReactNode;
     subtitle?: ReactNode;
     placeholder?: string;
     emptyState?: ReactNode;
+    emptyStateSuggestions?: EmptyStateSuggestion[];
     draft?: string;
     onDraftChange?: (value: string) => void;
     showConversationList?: boolean;
     chromeStyle?: AssistantChromeStyle;
     statusPlacement?: AssistantStatusPlacement;
+    radius?: AssistantRadiusScale;
+    showModelPicker?: boolean;
+    showNewConversationButton?: boolean;
     onNavigateResource?: (resourceType: string, resourceId: string, meta?: Record<string, unknown>) => void;
     renderConversationLabel?: (args: AssistantConversationRenderArgs) => ReactNode;
     renderMessageContent?: (args: AssistantMessageRenderArgs) => ReactNode;
@@ -65,9 +70,12 @@ export declare function PlanSummaryStrip({ plan, onHide }: {
     onHide: () => void;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ThinkingIndicator(): import("react/jsx-runtime").JSX.Element | null;
-export declare function EmptyState({ onSendMessage }: {
+export interface EmptyStateProps {
     onSendMessage: (msg: string) => void;
-}): import("react/jsx-runtime").JSX.Element;
+    suggestions?: EmptyStateSuggestion[];
+}
+export declare const DEFAULT_EMPTY_STATE_SUGGESTIONS: EmptyStateSuggestion[];
+export declare function EmptyState({ onSendMessage, suggestions, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 export declare function MessageGroup({ message, conversationId, onNavigateResource, onWidgetSendPrompt, isStreaming, showAssistantHeader, renderMessageContent, renderPresentedFile, renderToolInvocation, }: {
     message: AssistantRenderableMessage;
     conversationId?: string | null;
@@ -79,5 +87,5 @@ export declare function MessageGroup({ message, conversationId, onNavigateResour
     renderPresentedFile?: (args: AssistantPresentedFileRenderArgs) => ReactNode;
     renderToolInvocation?: (args: AssistantToolRenderArgs) => ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function AssistantExperienceView({ controller, title, subtitle, placeholder, emptyState, draft: controlledDraft, onDraftChange, showConversationList, chromeStyle, statusPlacement, onNavigateResource, renderConversationLabel, renderMessageContent, renderPresentedFile, renderPendingFile, renderToolInvocation, }: AssistantExperienceViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantExperienceView({ controller, title, subtitle, placeholder, emptyState, emptyStateSuggestions, draft: controlledDraft, onDraftChange, showConversationList, chromeStyle, statusPlacement, radius, showModelPicker, showNewConversationButton, onNavigateResource, renderConversationLabel, renderMessageContent, renderPresentedFile, renderPendingFile, renderToolInvocation, }: AssistantExperienceViewProps): import("react/jsx-runtime").JSX.Element;
 export {};