@opengeni/react 1.2.1-canary.37222965366001 → 1.4.0

package/src/components/artifacts/session-artifact-viewer.tsx

@@ -203,7 +203,7 @@ function EditableBody({
     workspaceId: string;
     sessionId: string;
     result:
-      | { kind: "ready"; config: NonNullable<ClientConfig["artifacts"]> }
+      | { kind: "ready"; config: Exclude<NonNullable<ClientConfig["artifacts"]>, false> }
       | { kind: "unavailable" }
       | { kind: "error"; error: unknown };
   } | null>(null);
@@ -359,7 +359,9 @@ function EditableBody({
   );
 }
 
-function artifactCapabilityKey(config: NonNullable<ClientConfig["artifacts"]>): string {
+function artifactCapabilityKey(
+  config: Exclude<NonNullable<ClientConfig["artifacts"]>, false>,
+): string {
   return JSON.stringify([
     config.editableLiveUrl,
     config.cachePartition.accountId,

package/src/components/composer-transcription-control.tsx

@@ -50,6 +50,9 @@ export type ComposerTranscriptionMessages = {
   errorPermissionDenied: string;
   errorNotSupported: string;
   errorUnavailable: string;
+  errorInsufficientCredits: string;
+  errorAllowanceExhausted: string;
+  errorPolicyBlocked: string;
   errorTooLarge: string;
   errorInvalidAudio: string;
   errorStorageUnavailable: string;
@@ -78,6 +81,10 @@ const defaultMessages: ComposerTranscriptionMessages = {
   errorPermissionDenied: "Microphone permission was denied. Your draft was not changed.",
   errorNotSupported: "Voice input is not supported on this device.",
   errorUnavailable: "Voice input is not configured.",
+  errorInsufficientCredits:
+    "Voice input needs Opengeni credits. Add credits, then retry your saved recording.",
+  errorAllowanceExhausted: "Your usage limit was reached. Your recording is saved for later.",
+  errorPolicyBlocked: "Voice input isn't allowed for this account or workspace.",
   errorTooLarge: "Recording is too large. Try a shorter message.",
   errorInvalidAudio: "The recording could not be read. Try again.",
   errorStorageUnavailable: "Voice input stopped because audio could not be saved safely.",
@@ -518,6 +525,13 @@ function restingLevels(count: number): number[] {
 
 function transcriptionErrorMessage(code: string, messages: ComposerTranscriptionMessages): string {
   switch (code) {
+    case "insufficient_credits":
+      return messages.errorInsufficientCredits;
+    case "allowance_exhausted":
+    case "monthly_model_cost_limit":
+      return messages.errorAllowanceExhausted;
+    case "policy_blocked":
+      return messages.errorPolicyBlocked;
     case "permission_denied":
       return messages.errorPermissionDenied;
     case "not_supported":

package/src/components/composer.tsx

@@ -967,6 +967,7 @@ export const Surface = forwardRef<HTMLDivElement, ComposerSurfaceProps>(function
   const controller = useComposerController();
   return (
     <div
+      data-og-composer-surface=""
       {...props}
       ref={ref}
       onDragOver={controller.attachments ? controller.handleDragOver : undefined}

package/src/components/open-geni-chat.tsx

@@ -1,6 +1,15 @@
-import type { OpenGeniClient } from "@opengeni/sdk";
-import { ArrowUpIcon, LoaderCircleIcon, MenuIcon, XIcon } from "lucide-react";
+import {
+  OpenGeniApiError,
+  type FileResourceRef,
+  type LatencyMode,
+  type OpenGeniClient,
+  type ReasoningEffort,
+} from "@opengeni/sdk";
+import { MenuIcon, XIcon } from "lucide-react";
 import { useCallback, useRef, useState, type CSSProperties, type FormEvent } from "react";
+import { useWorkspaceModelCatalog } from "../hooks/use-available-models";
+import { FILE_ONLY_MESSAGE_TEXT, type ComposerState } from "../hooks/use-composer";
+import { useFileAttachments } from "../hooks/use-file-attachments";
 import { cn } from "../lib/cn";
 import { useErrorMessage } from "../lib/error-message";
 import {
@@ -9,7 +18,14 @@ import {
   type HostThemePreference,
 } from "../lib/host-theme";
 import { useOpenGeni, type ClientOverride } from "../session-context";
-import { SessionConversation, type SessionConversationProps } from "./session-conversation";
+import { ChatComposer } from "./chat-composer";
+import { ModelPolicyPicker } from "./model-policy-picker";
+import { useClientConfigFlags } from "../hooks/use-client-config-flags";
+import {
+  SessionConversation,
+  useComposerTranscription,
+  type SessionConversationProps,
+} from "./session-conversation";
 import { SessionList, type SessionListLabels, type SessionListProps } from "./session-list";
 import { SessionProxyScope, type SessionProxyBaseUrl } from "./session-proxy-scope";
 
@@ -32,6 +48,16 @@ const DEFAULT_LABELS: Omit<OpenGeniChatLabels, keyof SessionListLabels> = {
   newChatUnavailable: "New chats are not enabled for this product.",
 };
 
+/** What the first message carries besides its text. */
+export type OpenGeniChatCreateOptions = {
+  /** Files attached in the new-chat composer. */
+  resources?: FileResourceRef[] | undefined;
+  /** Present only when the user changed it in the model picker. */
+  model?: string | undefined;
+  reasoningEffort?: ReasoningEffort | undefined;
+  latencyMode?: LatencyMode | undefined;
+};
+
 export type OpenGeniChatProps = ClientOverride &
   SessionProxyBaseUrl & {
     /** Controlled selection. `null` shows the new-chat composer. */
@@ -41,18 +67,31 @@ export type OpenGeniChatProps = ClientOverride &
     onSessionChange?: ((sessionId: string | null) => void) | undefined;
     /**
      * Create a chat from its first message. Defaults to `client.createSession`
-     * with `{ initialMessage, idempotencyKey }`, which `createSessionProxyHandler`
-     * accepts when the server supplies a `createSession` hook. Return the new id.
+     * with `{ initialMessage, idempotencyKey }` plus the attached files and any
+     * model choice, which `createSessionProxyHandler` accepts when the server
+     * supplies a `createSession` hook. Return the new id.
      */
     createSession?:
-      | ((initialMessage: string, idempotencyKey: string) => Promise<string>)
+      | ((
+          initialMessage: string,
+          idempotencyKey: string,
+          options: OpenGeniChatCreateOptions,
+        ) => Promise<string>)
       | undefined;
-    /** Hide the "New chat" entry point. */
+    /**
+     * Hide the "New chat" entry point. It is also hidden when the session proxy
+     * reports chat creation unavailable (no `createSession` hook) and no
+     * `createSession` prop is given.
+     */
     newChat?: boolean | undefined;
-    /** Forwarded to the conversation (message rendering, tool renderers, composer...). */
+    /**
+     * Forwarded to the conversation (message rendering, tool renderers,
+     * composer...). `attachments`, `modelPicker`, `modelPickerProps`, and
+     * `composerProps` also apply to the new-chat composer.
+     */
     conversationProps?: Omit<
       SessionConversationProps,
-      "sessionId" | "client" | "workspaceId" | "baseUrl"
+      "sessionId" | "client" | "workspaceId" | "baseUrl" | "headers" | "fetch"
     >;
     /** Forwarded to the list (rename/archive toggles, page size). */
     listProps?: Pick<SessionListProps, "rename" | "archive" | "pageSize"> | undefined;
@@ -83,11 +122,17 @@ type CreateClient = Partial<Pick<OpenGeniClient, "createSession">>;
  * `<OpenGeniChat baseUrl="/api/opengeni" />` needs no provider: it talks to
  * your session proxy and uses the workspace the proxy resolves.
  */
-export function OpenGeniChat({ baseUrl, ...props }: OpenGeniChatProps) {
+export function OpenGeniChat({ baseUrl, headers, fetch, ...props }: OpenGeniChatProps) {
   if (baseUrl === undefined) return <Chat {...props} />;
-  const { client: _client, workspaceId, ...rest } = props;
+  const { client, workspaceId, ...rest } = props;
   return (
-    <SessionProxyScope baseUrl={baseUrl} workspaceId={workspaceId}>
+    <SessionProxyScope
+      baseUrl={baseUrl}
+      workspaceId={workspaceId}
+      client={client}
+      headers={headers}
+      fetch={fetch}
+    >
       <Chat {...rest} />
     </SessionProxyScope>
   );
@@ -108,7 +153,7 @@ function Chat({
   height = "100%",
   theme,
   surface,
-}: Omit<OpenGeniChatProps, "baseUrl">) {
+}: Omit<OpenGeniChatProps, "baseUrl" | "headers" | "fetch">) {
   const labels = { ...DEFAULT_LABELS, ...labelOverrides } as OpenGeniChatLabels;
   const scope = { client, workspaceId };
   const context = useOpenGeni(scope);
@@ -118,6 +163,9 @@ function Chat({
   const [listRevision, setListRevision] = useState(0);
   const root = useRef<HTMLDivElement>(null);
   const hostTheme = useHostTheme(root, { theme, surface });
+  const config = useClientConfigFlags(context.client);
+  // A host creator replaces the proxy route; otherwise trust the proxy's report.
+  const canCreate = createSession !== undefined || config.sessionCreation;
 
   const select = useCallback(
     (next: string | null) => {
@@ -129,15 +177,28 @@ function Chat({
   );
 
   const create = useCallback(
-    async (initialMessage: string, idempotencyKey: string): Promise<string> => {
-      if (createSession) return await createSession(initialMessage, idempotencyKey);
+    async (
+      initialMessage: string,
+      idempotencyKey: string,
+      options: OpenGeniChatCreateOptions,
+    ): Promise<string> => {
+      if (createSession) return await createSession(initialMessage, idempotencyKey, options);
       const creator = (context.client as unknown as CreateClient).createSession;
       if (typeof creator !== "function") throw new Error(labels.newChatUnavailable);
-      const created = await creator.call(context.client, context.workspaceId, {
-        initialMessage,
-        idempotencyKey,
-      } as Parameters<NonNullable<CreateClient["createSession"]>>[1]);
-      return created.id;
+      try {
+        const created = await creator.call(context.client, context.workspaceId, {
+          initialMessage,
+          idempotencyKey,
+          ...options,
+        } as Parameters<NonNullable<CreateClient["createSession"]>>[1]);
+        return created.id;
+      } catch (error) {
+        // A proxy without a createSession hook refuses the route itself.
+        if (error instanceof OpenGeniApiError && error.code === "route_not_allowed") {
+          throw new Error(labels.newChatUnavailable, { cause: error });
+        }
+        throw error;
+      }
     },
     [context.client, context.workspaceId, createSession, labels.newChatUnavailable],
   );
@@ -149,7 +210,7 @@ function Chat({
       labels={labels}
       selectedSessionId={selected}
       onSelect={select}
-      onNewChat={newChat ? () => select(null) : undefined}
+      onNewChat={newChat && canCreate ? () => select(null) : undefined}
       onArchived={(archivedId) => {
         if (archivedId === selected) select(null);
       }}
@@ -217,13 +278,19 @@ function Chat({
           {selected ? (
             <SessionConversation
               {...conversationProps}
+              // Sub-agent chats open in place, like a chat from the list.
+              onOpenSession={conversationProps?.onOpenSession ?? select}
               {...scope}
               sessionId={selected}
               height="100%"
             />
           ) : (
             <NewChat
+              scope={scope}
               labels={labels}
+              placeholderOverride={labelOverrides?.newChatPlaceholder}
+              conversationProps={conversationProps}
+              available={canCreate}
               create={create}
               onCreated={(id) => {
                 setListRevision((revision) => revision + 1);
@@ -237,43 +304,146 @@ function Chat({
   );
 }
 
+const NOOP_ASYNC = async () => {};
+
+/**
+ * The first message of a new chat, in the same composer as follow-ups: file
+ * attachments, the model picker when offered, and the host's `composerProps`
+ * (custom controls, voice input, copy).
+ */
 function NewChat({
+  scope,
   labels,
+  placeholderOverride,
+  conversationProps,
+  available,
   create,
   onCreated,
 }: {
+  scope: ClientOverride;
   labels: OpenGeniChatLabels;
-  create: (initialMessage: string, idempotencyKey: string) => Promise<string>;
+  placeholderOverride: string | undefined;
+  conversationProps: OpenGeniChatProps["conversationProps"];
+  /** False when this product cannot start chats; the composer is disabled and says so. */
+  available: boolean;
+  create: (
+    initialMessage: string,
+    idempotencyKey: string,
+    options: OpenGeniChatCreateOptions,
+  ) => Promise<string>;
   onCreated: (sessionId: string) => void;
 }) {
+  const context = useOpenGeni(scope);
+  const config = useClientConfigFlags(context.client);
+  const composerProps = conversationProps?.composerProps;
+  const modelPickerProps = conversationProps?.modelPickerProps;
+  const showModelPicker = conversationProps?.modelPicker ?? config.modelSelection;
+  const catalog = useWorkspaceModelCatalog({
+    client: context.client,
+    workspaceId: context.workspaceId,
+    enabled: showModelPicker,
+  });
+  const files = useFileAttachments(scope);
+  const uploadsEnabled = (conversationProps?.attachments ?? true) && config.uploads;
+  const transcription = useComposerTranscription(
+    context.client,
+    context.workspaceId,
+    (conversationProps?.voiceInput ?? true) && available ? config.voiceInput : null,
+  );
   const [text, setText] = useState("");
   const [sending, setSending] = useState(false);
   const [error, setError] = useState<{ cause: unknown } | null>(null);
+  // Only what the user changed is sent; everything else stays server-owned.
+  const [choice, setChoice] = useState<
+    Pick<OpenGeniChatCreateOptions, "model" | "reasoningEffort" | "latencyMode">
+  >({});
   const formatError = useErrorMessage();
-  // One key per draft, so a retried send returns the same chat.
-  const idempotencyKey = useRef(crypto.randomUUID());
+  // One key per attempted payload, so a retried send returns the same chat
+  // and an edited retry is a new request rather than an idempotency conflict.
+  const attempt = useRef<{ fingerprint: string; key: string } | null>(null);
+  const resources = uploadsEnabled ? files.readyResources : [];
+  const pendingFiles = uploadsEnabled && files.hasUnresolved;
 
-  const submit = async (event: FormEvent) => {
-    event.preventDefault();
-    const initialMessage = text.trim();
-    if (!initialMessage || sending) return;
+  const submit = async (): Promise<boolean> => {
+    const initialMessage = text.trim() || (resources.length > 0 ? FILE_ONLY_MESSAGE_TEXT : "");
+    if (!initialMessage || sending || pendingFiles || !available) return false;
+    const options: OpenGeniChatCreateOptions = {
+      ...(resources.length > 0 ? { resources } : {}),
+      ...(showModelPicker ? choice : {}),
+    };
+    const fingerprint = JSON.stringify([initialMessage, options]);
+    if (attempt.current?.fingerprint !== fingerprint) {
+      attempt.current = { fingerprint, key: crypto.randomUUID() };
+    }
     setSending(true);
     setError(null);
     try {
-      const id = await create(initialMessage, idempotencyKey.current);
-      idempotencyKey.current = crypto.randomUUID();
+      const id = await create(initialMessage, attempt.current.key, options);
+      attempt.current = null;
       setText("");
+      files.removeReadyFiles(resources.map((resource) => resource.fileId));
       onCreated(id);
+      return true;
     } catch (cause) {
       setError({ cause });
+      return false;
     } finally {
       setSending(false);
     }
   };
 
+  const defaultModel = catalog.defaultModel;
+  const policy =
+    showModelPicker && (choice.model ?? defaultModel)
+      ? {
+          model: (choice.model ?? defaultModel)!,
+          reasoningEffort:
+            choice.reasoningEffort ?? config.defaultReasoningEffort ?? ("medium" as const),
+          latencyMode: choice.latencyMode ?? ("standard" as const),
+        }
+      : null;
+
+  const composer: ComposerState = {
+    value: text,
+    setValue: setText,
+    hasDraftContent: () => text.length > 0 || files.attachments.length > 0,
+    send: submit,
+    steer: submit,
+    sending,
+    canSend:
+      available && (text.trim().length > 0 || resources.length > 0) && !sending && !pendingFiles,
+    pause: NOOP_ASYNC,
+    pausing: false,
+    resume: NOOP_ASYNC,
+    resumeScope: NOOP_ASYNC,
+    resuming: false,
+    draft: null,
+    draftRevision: 0,
+    draftLoading: false,
+    draftSaving: false,
+    draftConflict: null,
+    policy,
+    setModel: (model) => setChoice((current) => ({ ...current, model })),
+    setReasoningEffort: (reasoningEffort) =>
+      setChoice((current) => ({ ...current, reasoningEffort })),
+    setLatencyMode: (latencyMode) => setChoice((current) => ({ ...current, latencyMode })),
+    draftPersistence: "disabled",
+    applyDraft: () => {},
+    reloadDraft: NOOP_ASYNC,
+    resolveDraftConflict: NOOP_ASYNC,
+    restoredResources: [],
+    removeRestoredResource: () => {},
+    // Shown below with the product's own copy.
+    error: null,
+    clearError: () => setError(null),
+  };
+
   return (
     <form
-      onSubmit={(event) => void submit(event)}
+      onSubmit={(event: FormEvent) => {
+        event.preventDefault();
+        void submit();
+      }}
       className="mx-auto box-border flex h-full w-full max-w-3xl flex-col gap-4 p-3"
       data-og-new-chat-composer=""
     >
@@ -282,47 +452,50 @@ function NewChat({
       {labels.newChatTitle ? (
         <p className="text-center text-og-md font-medium text-og-fg">{labels.newChatTitle}</p>
       ) : null}
-      <div
-        className={cn(
-          "flex items-end gap-2 rounded-og-lg border border-og-border/90 bg-og-surface-1 p-2 pl-3.5 shadow-og-sm",
-          "transition-[border-color,box-shadow] duration-200 ease-og-out",
-          "focus-within:border-og-accent/50 focus-within:shadow-og-glow",
-        )}
-      >
-        <textarea
-          value={text}
-          onChange={(event) => setText(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
-              event.preventDefault();
-              event.currentTarget.form?.requestSubmit();
-            }
-          }}
-          placeholder={labels.newChatPlaceholder}
-          aria-label={labels.newChatPlaceholder}
-          rows={2}
-          disabled={sending}
-          className="min-h-12 flex-1 resize-none bg-transparent py-1 text-og-composer text-og-fg outline-hidden placeholder:text-og-fg-subtle md:text-og-composer-wide"
-        />
-        <button
-          type="submit"
-          aria-label={labels.send}
-          disabled={sending || !text.trim()}
-          className={cn(
-            "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md pointer-coarse:size-11",
-            "border border-og-primary-border bg-og-primary text-og-primary-fg",
-            "transition-[background-color,transform,opacity] duration-150 ease-og-spring",
-            "hover:bg-og-primary-hover active:scale-95 disabled:cursor-not-allowed disabled:opacity-50",
-          )}
-        >
-          {sending ? (
-            <LoaderCircleIcon className="size-4 animate-og-spin" aria-hidden />
-          ) : (
-            <ArrowUpIcon className="size-4" aria-hidden />
-          )}
-        </button>
-      </div>
-      {error ? (
+      <ChatComposer
+        {...composerProps}
+        {...(transcription && composerProps?.transcription === undefined ? { transcription } : {})}
+        composer={composer}
+        attachments={uploadsEnabled ? files : undefined}
+        disabled={!available || composerProps?.disabled}
+        runControl="none"
+        running={false}
+        placeholder={placeholderOverride ?? composerProps?.placeholder ?? labels.newChatPlaceholder}
+        inputProps={{
+          "aria-label": placeholderOverride ?? labels.newChatPlaceholder,
+          ...composerProps?.inputProps,
+        }}
+        messages={{ sendMessageAriaLabel: labels.send, ...composerProps?.messages }}
+        controlsStart={
+          composerProps?.controlsStart ??
+          (policy ? (
+            <ModelPolicyPicker
+              groupPresentation={modelPickerProps?.groupPresentation}
+              messages={modelPickerProps?.messages}
+              rows={catalog.rows}
+              model={policy.model}
+              effort={policy.reasoningEffort}
+              latencyMode={policy.latencyMode}
+              loading={catalog.loading}
+              error={catalog.error?.message}
+              disabled={sending}
+              menuSide="bottom"
+              onOpenChange={(open) => {
+                if (open) void catalog.refresh();
+              }}
+              onModelChange={composer.setModel!}
+              onEffortChange={composer.setReasoningEffort!}
+              onLatencyModeChange={composer.setLatencyMode!}
+            />
+          ) : undefined)
+        }
+        responsiveBasis={composerProps?.responsiveBasis ?? "container"}
+      />
+      {!available ? (
+        <p className="text-center text-og-sm text-og-fg-muted" data-og-new-chat-unavailable="">
+          {labels.newChatUnavailable}
+        </p>
+      ) : error ? (
         <p role="alert" className="text-center text-og-sm text-og-status-failed">
           {formatError(
             error.cause,