@opengeni/react 1.2.1-canary.37222965366001 → 1.3.0

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

@@ -1,6 +1,9 @@
-import type { OpenGeniClient } from "@opengeni/sdk";
-import { ArrowUpIcon, LoaderCircleIcon, MenuIcon, XIcon } from "lucide-react";
+import type { FileResourceRef, LatencyMode, OpenGeniClient, 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 +12,13 @@ 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 {
+  SessionConversation,
+  useClientConfigFlags,
+  type SessionConversationProps,
+} from "./session-conversation";
 import { SessionList, type SessionListLabels, type SessionListProps } from "./session-list";
 import { SessionProxyScope, type SessionProxyBaseUrl } from "./session-proxy-scope";
 
@@ -32,6 +41,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 +60,27 @@ 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. */
     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 +111,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 +142,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);
@@ -129,13 +163,18 @@ 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,
+        ...options,
       } as Parameters<NonNullable<CreateClient["createSession"]>>[1]);
       return created.id;
     },
@@ -223,7 +262,10 @@ function Chat({
             />
           ) : (
             <NewChat
+              scope={scope}
               labels={labels}
+              placeholderOverride={labelOverrides?.newChatPlaceholder}
+              conversationProps={conversationProps}
               create={create}
               onCreated={(id) => {
                 setListRevision((revision) => revision + 1);
@@ -237,43 +279,137 @@ 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,
   create,
   onCreated,
 }: {
+  scope: ClientOverride;
   labels: OpenGeniChatLabels;
-  create: (initialMessage: string, idempotencyKey: string) => Promise<string>;
+  placeholderOverride: string | undefined;
+  conversationProps: OpenGeniChatProps["conversationProps"];
+  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 [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) 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: (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,46 +418,43 @@ 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>
+      <ChatComposer
+        {...composerProps}
+        composer={composer}
+        attachments={uploadsEnabled ? files : undefined}
+        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"}
+      />
       {error ? (
         <p role="alert" className="text-center text-og-sm text-og-status-failed">
           {formatError(

package/src/components/session-conversation.tsx

@@ -1,4 +1,4 @@
-import { SESSION_SCOPE_HEADER, type SendMessageInput } from "@opengeni/sdk";
+import { SESSION_SCOPE_HEADER, type ReasoningEffort, type SendMessageInput } from "@opengeni/sdk";
 import {
   lazy,
   Suspense,
@@ -134,11 +134,22 @@ export type SessionConversationProps = ClientOverride &
  * (including Site clients), one shared event feed, and authoritative queue state.
  * `<SessionConversation baseUrl="/api/opengeni" sessionId={id} />` needs no
  * provider: it talks to your session proxy and its resolved workspace. */
-export function SessionConversation({ baseUrl, ...props }: SessionConversationProps) {
+export function SessionConversation({
+  baseUrl,
+  headers,
+  fetch,
+  ...props
+}: SessionConversationProps) {
   if (baseUrl === undefined) return <RetryingConversation {...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}
+    >
       <RetryingConversation {...rest} />
     </SessionProxyScope>
   );
@@ -494,17 +505,24 @@ function useDefaultInteractiveBlock(
 }
 
 /** Deployment/proxy flags from the client config: uploads, and whether model choice is open. */
-function useClientConfigFlags(client: {
+export function useClientConfigFlags(client: {
   getClientConfig: () => Promise<{
     fileUploads?: { enabled?: boolean };
     modelSelection?: boolean | undefined;
     sandboxFiles?: boolean | undefined;
+    defaultReasoningEffort?: ReasoningEffort | undefined;
   }>;
-}): { uploads: boolean; modelSelection: boolean; sandboxFiles: boolean } {
-  const [flags, setFlags] = useState({
+}): {
+  uploads: boolean;
+  modelSelection: boolean;
+  sandboxFiles: boolean;
+  defaultReasoningEffort: ReasoningEffort | null;
+} {
+  const [flags, setFlags] = useState<ReturnType<typeof useClientConfigFlags>>({
     uploads: false,
     modelSelection: false,
     sandboxFiles: false,
+    defaultReasoningEffort: null,
   });
   useEffect(() => {
     let live = true;
@@ -516,6 +534,7 @@ function useClientConfigFlags(client: {
             // Only an explicit offer shows end users the picker.
             modelSelection: config.modelSelection === true,
             sandboxFiles: config.sandboxFiles !== false,
+            defaultReasoningEffort: config.defaultReasoningEffort ?? null,
           });
         }
       },

package/src/components/session-proxy-scope.tsx

@@ -1,16 +1,29 @@
-import { OpenGeniBrowserClient } from "@opengeni/sdk/browser";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { OpenGeniBrowserClient, type FetchLike } from "@opengeni/sdk/browser";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import type { SessionClientLike } from "../client";
 import { OpenGeniProvider } from "../provider";
 
+/** Request headers for every proxy call: static, or computed per request. */
+export type SessionProxyHeaders = Record<string, string> | (() => Record<string, string>);
+
 export type SessionProxyBaseUrl = {
   /**
    * Mount path of your `createSessionProxyHandler` (for example
    * `"/api/opengeni"`). The component then needs no `OpenGeniProvider`,
    * client, or workspace id: it creates the browser client for that path and
    * uses the workspace the proxy resolved for the signed-in user. An explicit
-   * `workspaceId` skips that lookup.
+   * `workspaceId` skips that lookup. A `client` you pass is used instead of
+   * the created one (point it at the same proxy).
    */
   baseUrl?: string | undefined;
+  /**
+   * `baseUrl` mode: headers added to every proxy request, for hosts that
+   * authenticate with a bearer token instead of cookies. A function is called
+   * per request, so it can return the current token.
+   */
+  headers?: SessionProxyHeaders | undefined;
+  /** `baseUrl` mode: custom fetch for every proxy request (async auth, retries). */
+  fetch?: FetchLike | undefined;
 };
 
 type ScopeState =
@@ -26,18 +39,45 @@ type ScopeState =
 export function SessionProxyScope({
   baseUrl,
   workspaceId,
+  client: suppliedClient,
+  headers,
+  fetch,
   children,
-}: {
+}: Omit<SessionProxyBaseUrl, "baseUrl"> & {
   baseUrl: string;
   workspaceId?: string | undefined;
+  client?: SessionClientLike | undefined;
   children: ReactNode;
 }) {
+  if (suppliedClient && (headers !== undefined || fetch !== undefined)) {
+    throw new TypeError(
+      "@opengeni/react: pass headers/fetch either to your own client or as props, not both.",
+    );
+  }
+  // Latest values without recreating the client (inline props change identity).
+  const headersRef = useRef(headers);
+  headersRef.current = headers;
+  const fetchRef = useRef(fetch);
+  fetchRef.current = fetch;
+  const hasFetch = fetch !== undefined;
   // Version skew between this bundle and the server SDK is tolerated, as for
   // any embedded host: the proxy reports its own contract revision.
-  const client = useMemo(
-    () => new OpenGeniBrowserClient({ baseUrl, apiContract: "compatible" }),
-    [baseUrl],
+  const ownClient = useMemo(
+    () =>
+      new OpenGeniBrowserClient({
+        baseUrl,
+        apiContract: "compatible",
+        headers: () => {
+          const current = headersRef.current;
+          return typeof current === "function" ? current() : (current ?? {});
+        },
+        ...(hasFetch
+          ? { fetch: (input, init) => (fetchRef.current ?? globalThis.fetch)(input, init) }
+          : {}),
+      }),
+    [baseUrl, hasFetch],
   );
+  const client: SessionClientLike = suppliedClient ?? ownClient;
   const [state, setState] = useState<ScopeState>(
     workspaceId ? { status: "ready", workspaceId } : { status: "loading" },
   );