lemma-sdk 0.2.19 → 0.2.20

package/README.md

@@ -179,37 +179,7 @@ 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.
-
-#### Important for Tailwind apps
-
-If your app uses Tailwind and installs `lemma-sdk` from npm, Tailwind must scan the SDK package too. Otherwise the assistant can look half-styled: native file inputs may appear, layouts can collapse, spacing disappears, and buttons/header chrome look wrong.
-
-For Tailwind v3, add the SDK package to `content`:
-
-```js
-// tailwind.config.js
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/lemma-sdk/dist/react/**/*.{js,mjs}",
-  ],
-}
-```
-
-If you are developing against a local checkout of the SDK source instead of the published npm package, scan the source files too:
-
-```js
-// tailwind.config.js
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "../lemma-typescript/src/react/**/*.{ts,tsx}",
-  ],
-}
-```
+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:
 
@@ -233,7 +203,6 @@ 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 Tailwind, scan the SDK package or SDK source
 - if you use `AssistantEmbedded`, pass `theme` directly there
 - if you use `AssistantExperienceView`, wrap it in `AssistantThemeScope`
 
@@ -244,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";
@@ -264,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>
@@ -275,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";
@@ -305,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"
@@ -319,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";
@@ -335,6 +338,7 @@ import {
   AssistantMessageViewport,
   AssistantShellLayout,
   AssistantThemeScope,
+  EmptyState,
   MessageGroup,
   PlanSummaryStrip,
   ThinkingIndicator,
@@ -369,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}
@@ -411,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 {};