@opengeni/react 3.3.2 → 3.4.0

package/src/components/new-conversation.tsx

@@ -0,0 +1,221 @@
+import { OpenGeniApiError } from "@opengeni/sdk";
+import { lazy, Suspense, useRef, type ComponentProps, type FormEvent } from "react";
+import {
+  useNewConversation,
+  type NewConversationController,
+  type UseNewConversationOptions,
+} from "../hooks/use-new-conversation";
+import { useRealtimeVoiceModels } from "../hooks/use-realtime-voice-models";
+import { useErrorMessage } from "../lib/error-message";
+import { useHostTheme } from "../lib/host-theme";
+import { cn } from "../lib/cn";
+import type { NewSessionRealtimeControl } from "../realtime/realtime-control";
+import { ChatComposer } from "./chat-composer";
+import { ModelPolicyPicker } from "./model-policy-picker";
+import { useComposerTranscription, type SessionConversationProps } from "./session-conversation";
+import { SessionProxyScope, type SessionProxyBaseUrl } from "./session-proxy-scope";
+
+const LazyNewVoice = lazy(() => import("../realtime/embedded-new-voice"));
+
+export type NewConversationLabels = {
+  title: string;
+  placeholder: string;
+  send: string;
+  unavailable: string;
+  retry: string;
+  pending: string;
+  finishingUploads: string;
+};
+const DEFAULT_LABELS: NewConversationLabels = {
+  title: "How can I help?",
+  placeholder: "Ask anything…",
+  send: "Send",
+  unavailable: "New chats are not enabled for this product.",
+  retry: "Retry",
+  pending: "Creation is not confirmed. Retry checks the same request; your newer draft stays here.",
+  finishingUploads: "Chat created. Finish or remove the remaining uploads to open it.",
+};
+type Presentation = {
+  composerProps?: SessionConversationProps["composerProps"] | undefined;
+  modelPickerProps?: SessionConversationProps["modelPickerProps"] | undefined;
+  voiceInput?: boolean | undefined;
+  realtimeVoiceProps?: SessionConversationProps["realtimeVoiceProps"] | undefined;
+  labels?: Partial<NewConversationLabels> | undefined;
+  theme?: SessionConversationProps["theme"] | undefined;
+  surface?: SessionConversationProps["surface"] | undefined;
+  height?: SessionConversationProps["height"] | undefined;
+  className?: string | undefined;
+};
+
+export type NewConversationProps = UseNewConversationOptions & SessionProxyBaseUrl & Presentation;
+export type NewConversationViewProps = Presentation & { creation: NewConversationController };
+
+/** Standalone stock new-chat composer. OpenGeniChat uses this same implementation. */
+export function NewConversation({ baseUrl, headers, fetch, ...props }: NewConversationProps) {
+  if (baseUrl === undefined) return <NewConversationRuntime {...props} />;
+  const { client, workspaceId, ...rest } = props;
+  return (
+    <SessionProxyScope
+      baseUrl={baseUrl}
+      headers={headers}
+      fetch={fetch}
+      client={client}
+      workspaceId={workspaceId}
+    >
+      <NewConversationRuntime {...rest} />
+    </SessionProxyScope>
+  );
+}
+function NewConversationRuntime(props: NewConversationProps) {
+  const creation = useNewConversation(props);
+  return <NewConversationView {...props} creation={creation} />;
+}
+
+/** Presentation for a new-chat controller kept above host layout changes. */
+export function NewConversationView({
+  creation,
+  labels: overrides,
+  composerProps,
+  modelPickerProps,
+  voiceInput = true,
+  realtimeVoiceProps,
+  theme,
+  surface,
+  height = "100%",
+  className,
+}: NewConversationViewProps) {
+  const labels = { ...DEFAULT_LABELS, ...overrides };
+  const { composer, config, catalog, files, uploadsEnabled, available, error, pending } = creation;
+  const formatError = useErrorMessage();
+  const root = useRef<HTMLFormElement>(null);
+  const hostTheme = useHostTheme(root, { theme, surface });
+  const transcription = useComposerTranscription(
+    creation.client,
+    creation.workspaceId,
+    voiceInput && available ? config.voiceInput : null,
+  );
+  const models = useRealtimeVoiceModels(
+    creation.client,
+    creation.workspaceId,
+    creation.realtimeVoiceEnabled && available,
+  );
+  const voice = models.length ? (
+    <Suspense fallback={null}>
+      <LazyNewVoice
+        client={
+          creation.client as unknown as ComponentProps<typeof NewSessionRealtimeControl>["client"]
+        }
+        workspaceId={creation.workspaceId}
+        codexConnected={realtimeVoiceProps?.codexConnected ?? false}
+        modelMenu={realtimeVoiceProps?.modelMenu}
+        disabled={
+          composer.sending || pending !== null || creation.finishingUploads || files.hasUnresolved
+        }
+        onStart={creation.startRealtime}
+      />
+    </Suspense>
+  ) : null;
+  return (
+    <form
+      onSubmit={(event: FormEvent) => {
+        event.preventDefault();
+        void composer.send();
+      }}
+      ref={root}
+      className={cn(
+        "og-root mx-auto box-border flex w-full max-w-3xl flex-col gap-4 bg-og-bg p-3 text-og-base text-og-fg",
+        className,
+      )}
+      style={{ ...hostTheme.style, height }}
+      data-og-theme={hostTheme.attribute}
+      data-og-host-theme=""
+      data-og-new-chat-composer=""
+    >
+      <div aria-hidden className="min-h-0 flex-[2]" />
+      {labels.title ? (
+        <p className="text-center text-og-md font-medium text-og-fg">{labels.title}</p>
+      ) : null}
+      <ChatComposer
+        {...composerProps}
+        {...(transcription && composerProps?.transcription === undefined ? { transcription } : {})}
+        composer={composer}
+        attachments={uploadsEnabled ? files : undefined}
+        disabled={!available || composerProps?.disabled}
+        runControl="none"
+        running={false}
+        placeholder={overrides?.placeholder ?? composerProps?.placeholder ?? labels.placeholder}
+        inputProps={{ "aria-label": labels.placeholder, ...composerProps?.inputProps }}
+        messages={{ sendMessageAriaLabel: labels.send, ...composerProps?.messages }}
+        actionsStart={
+          voice ? (
+            <>
+              {composerProps?.actionsStart}
+              {voice}
+            </>
+          ) : (
+            composerProps?.actionsStart
+          )
+        }
+        controlsStart={
+          composerProps?.controlsStart ??
+          (composer.policy ? (
+            <ModelPolicyPicker
+              groupPresentation={modelPickerProps?.groupPresentation}
+              messages={modelPickerProps?.messages}
+              rows={catalog.rows}
+              model={composer.policy.model}
+              effort={composer.policy.reasoningEffort}
+              latencyMode={composer.policy.latencyMode}
+              loading={catalog.loading}
+              error={catalog.error?.message}
+              disabled={composer.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.unavailable}
+        </p>
+      ) : error ? (
+        <p role="alert" className="text-center text-og-sm text-og-status-failed">
+          {formatError(
+            error.cause,
+            error.cause instanceof OpenGeniApiError && error.cause.code === "route_not_allowed"
+              ? labels.unavailable
+              : undefined,
+          )}
+        </p>
+      ) : null}
+      {pending ? (
+        <div className="text-center text-og-sm text-og-fg-muted">
+          <p role="status">{labels.pending}</p>
+          <button
+            type="button"
+            disabled={composer.sending}
+            onClick={() => {
+              void creation.retry();
+            }}
+            className="mt-2 rounded-og-sm border border-og-border px-3 py-1.5 text-og-fg hover:bg-og-hover disabled:opacity-50"
+          >
+            {labels.retry}
+          </button>
+        </div>
+      ) : null}
+      {creation.finishingUploads ? (
+        <p role="status" className="text-center text-og-sm text-og-fg-muted">
+          {labels.finishingUploads}
+        </p>
+      ) : null}
+      <div aria-hidden className="min-h-0 flex-[3]" />
+    </form>
+  );
+}

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

@@ -0,0 +1,309 @@
+import { MenuIcon, XIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import type {
+  CreatedConversation,
+  NewConversationCreateOptions,
+} from "../hooks/use-new-conversation";
+import { cn } from "../lib/cn";
+import { notifyObserver } from "../lib/notify-observer";
+import {
+  useHostTheme,
+  type HostSurfacePreference,
+  type HostThemePreference,
+} from "../lib/host-theme";
+import { useOpenGeni, type ClientOverride } from "../session-context";
+import { NewConversation } from "./new-conversation";
+import { useClientConfigFlags } from "../hooks/use-client-config-flags";
+import { SessionConversation, type SessionConversationProps } from "./session-conversation";
+import { SessionList, type SessionListLabels, type SessionListProps } from "./session-list";
+import { SessionProxyScope, type SessionProxyBaseUrl } from "./session-proxy-scope";
+
+export type OpenGeniChatLabels = SessionListLabels & {
+  openChats: string;
+  closeChats: string;
+  newChatPlaceholder: string;
+  /** Heading above the new-chat composer; empty hides it. */
+  newChatTitle: string;
+  send: string;
+  newChatUnavailable: string;
+  newChatRetry?: string | undefined;
+  newChatPending?: string | undefined;
+  newChatFinishingUploads?: string | undefined;
+};
+
+const DEFAULT_LABELS: Omit<OpenGeniChatLabels, keyof SessionListLabels> = {
+  openChats: "Open chats",
+  closeChats: "Close chats",
+  newChatPlaceholder: "Ask anything…",
+  newChatTitle: "How can I help?",
+  send: "Send",
+  newChatUnavailable: "New chats are not enabled for this product.",
+};
+
+/** What the first message carries besides its text. */
+export type OpenGeniChatCreateOptions = NewConversationCreateOptions;
+
+export type OpenGeniChatProps = ClientOverride &
+  SessionProxyBaseUrl & {
+    /** Controlled selection. `null` shows the new-chat composer. */
+    sessionId?: string | null | undefined;
+    /** Initial selection when uncontrolled. Defaults to a new chat. */
+    defaultSessionId?: string | null | undefined;
+    onSessionChange?: ((sessionId: string | null) => void) | undefined;
+    /**
+     * Create a chat from its first message. Defaults to `client.createSession`
+     * 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,
+          options: OpenGeniChatCreateOptions,
+        ) => Promise<string>)
+      | undefined;
+    /**
+     * 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...). `attachments`, `modelPicker`, `modelPickerProps`, and
+     * `composerProps` also apply to the new-chat composer.
+     */
+    conversationProps?: Omit<
+      SessionConversationProps,
+      "sessionId" | "client" | "workspaceId" | "baseUrl" | "headers" | "fetch"
+    >;
+    /** Forwarded to the list (rename/archive toggles, page size). */
+    listProps?: Pick<SessionListProps, "rename" | "archive" | "pageSize"> | undefined;
+    labels?: Partial<OpenGeniChatLabels> | undefined;
+    className?: string | undefined;
+    /** Defaults to filling the host. */
+    height?: CSSProperties["height"];
+    /**
+     * Light or dark. Defaults to `auto`: follow the host page (an enclosing
+     * `data-og-theme`, `class="dark"`/`data-theme` on <html> or <body>, the
+     * host's `color-scheme`, then its background), not the OS setting alone.
+     */
+    theme?: HostThemePreference | undefined;
+    /**
+     * `host` (default) derives backgrounds and cards from the host background so
+     * the chat blends in; `theme` uses the `--og-color-*` surface tokens as they
+     * are. Customized surface tokens are always kept.
+     */
+    surface?: HostSurfacePreference | undefined;
+  };
+
+/**
+ * A complete chat experience: the user's chat list plus the conversation.
+ * The list is a sidebar when the component is wide and a drawer when narrow
+ * (container-based, so it adapts inside panels as well as full pages).
+ * `<OpenGeniChat baseUrl="/api/opengeni" />` needs no provider: it talks to
+ * your session proxy and uses the workspace the proxy resolves.
+ */
+export function OpenGeniChat({ baseUrl, headers, fetch, ...props }: OpenGeniChatProps) {
+  if (baseUrl === undefined) return <Chat {...props} />;
+  const { client, workspaceId, ...rest } = props;
+  return (
+    <SessionProxyScope
+      baseUrl={baseUrl}
+      workspaceId={workspaceId}
+      client={client}
+      headers={headers}
+      fetch={fetch}
+    >
+      <Chat {...rest} />
+    </SessionProxyScope>
+  );
+}
+
+function Chat({
+  client,
+  workspaceId,
+  sessionId: controlledSessionId,
+  defaultSessionId = null,
+  onSessionChange,
+  createSession,
+  newChat = true,
+  conversationProps,
+  listProps,
+  labels: labelOverrides,
+  className,
+  height = "100%",
+  theme,
+  surface,
+}: Omit<OpenGeniChatProps, "baseUrl" | "headers" | "fetch">) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides } as OpenGeniChatLabels;
+  const scope = { client, workspaceId };
+  const context = useOpenGeni(scope);
+  const [uncontrolled, setUncontrolled] = useState<string | null>(defaultSessionId);
+  const selected = controlledSessionId !== undefined ? controlledSessionId : uncontrolled;
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [listRevision, setListRevision] = useState(0);
+  const [handoff, setHandoff] = useState<CreatedConversation | null>(null);
+  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) => {
+      setHandoff(null);
+      if (controlledSessionId === undefined) setUncontrolled(next);
+      notifyObserver(onSessionChange, next);
+      setDrawerOpen(false);
+    },
+    [controlledSessionId, onSessionChange],
+  );
+
+  useEffect(() => {
+    if (!handoff) return;
+    // The child's native composer captures its seed on mount. Do not seed it
+    // again after later navigation; voice keeps its separate one-shot handoff
+    // until the lazy control reports consumption.
+    if (selected === handoff.sessionId && !handoff.realtimeModel) setHandoff(null);
+    else if (selected !== null && selected !== handoff.sessionId) setHandoff(null);
+  }, [handoff, selected]);
+
+  const list = (
+    <SessionList
+      {...scope}
+      {...listProps}
+      labels={labels}
+      selectedSessionId={selected}
+      onSelect={select}
+      onNewChat={newChat && canCreate ? () => select(null) : undefined}
+      onArchived={(archivedId) => {
+        if (archivedId === selected) select(null);
+      }}
+      refreshKey={listRevision}
+      className="h-full"
+    />
+  );
+
+  return (
+    <div
+      ref={root}
+      className={cn(
+        "og-root og-chat relative flex min-h-0 min-w-0 bg-og-bg text-og-base text-og-fg",
+        className,
+      )}
+      style={{ ...hostTheme.style, height }}
+      data-og-theme={hostTheme.attribute}
+      data-og-host-theme=""
+      data-og-chat=""
+    >
+      <aside
+        className="og-chat-sidebar min-h-0 w-64 shrink-0 flex-col border-r border-og-border"
+        data-og-chat-sidebar=""
+      >
+        {list}
+      </aside>
+      {drawerOpen ? (
+        <div className="og-chat-drawer absolute inset-0 z-30 flex" data-og-chat-drawer="">
+          <div className="flex h-full w-[min(20rem,85%)] flex-col border-r border-og-border bg-og-bg shadow-og-lg">
+            <div className="flex justify-end p-1">
+              <button
+                type="button"
+                aria-label={labels.closeChats}
+                onClick={() => setDrawerOpen(false)}
+                className="rounded p-1.5 text-og-fg-muted hover:bg-og-surface-2"
+              >
+                <XIcon className="size-4" aria-hidden />
+              </button>
+            </div>
+            <div className="min-h-0 flex-1">{list}</div>
+          </div>
+          <button
+            type="button"
+            aria-label={labels.closeChats}
+            className="flex-1 bg-black/25"
+            onClick={() => setDrawerOpen(false)}
+          />
+        </div>
+      ) : null}
+      <main className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <div className="og-chat-menu flex items-center gap-2 px-2 py-1">
+          <button
+            type="button"
+            aria-label={labels.openChats}
+            aria-expanded={drawerOpen}
+            onClick={() => setDrawerOpen(true)}
+            className="rounded p-1.5 text-og-fg-muted hover:bg-og-surface-2"
+            data-og-chat-menu=""
+          >
+            <MenuIcon className="size-4" aria-hidden />
+          </button>
+          <span className="text-og-sm font-semibold text-og-fg-muted">{labels.heading}</span>
+        </div>
+        <div className="og-chat-main min-h-0 flex-1 px-3 pb-3 pt-1">
+          {selected ? (
+            <SessionConversation
+              {...conversationProps}
+              composerOptions={{
+                ...conversationProps?.composerOptions,
+                ...(handoff?.sessionId === selected ? { initialDraft: handoff.draft } : {}),
+              }}
+              realtimeVoiceProps={{
+                ...conversationProps?.realtimeVoiceProps,
+                ...(handoff?.sessionId === selected && handoff.realtimeModel
+                  ? {
+                      realtimeAutostartModel: handoff.realtimeModel,
+                      onRealtimeAutostartConsumed: () => {
+                        setHandoff(null);
+                        notifyObserver(
+                          conversationProps?.realtimeVoiceProps?.onRealtimeAutostartConsumed,
+                        );
+                      },
+                    }
+                  : {}),
+              }}
+              // Sub-agent chats open in place, like a chat from the list.
+              onOpenSession={conversationProps?.onOpenSession ?? select}
+              {...scope}
+              sessionId={selected}
+              height="100%"
+            />
+          ) : (
+            <NewConversation
+              {...scope}
+              attachments={conversationProps?.attachments}
+              modelPicker={conversationProps?.modelPicker}
+              modelPickerProps={conversationProps?.modelPickerProps}
+              composerProps={conversationProps?.composerProps}
+              voiceInput={conversationProps?.voiceInput}
+              realtimeVoice={conversationProps?.realtimeVoice}
+              realtimeVoiceProps={conversationProps?.realtimeVoiceProps}
+              labels={{
+                ...(labels.newChatRetry ? { retry: labels.newChatRetry } : {}),
+                ...(labels.newChatPending ? { pending: labels.newChatPending } : {}),
+                ...(labels.newChatFinishingUploads
+                  ? { finishingUploads: labels.newChatFinishingUploads }
+                  : {}),
+                title: labels.newChatTitle,
+                send: labels.send,
+                unavailable: labels.newChatUnavailable,
+                placeholder:
+                  labelOverrides?.newChatPlaceholder ??
+                  conversationProps?.composerProps?.placeholder ??
+                  labels.newChatPlaceholder,
+              }}
+              enabled={canCreate}
+              createSession={createSession}
+              onCreated={(created) => {
+                setListRevision((revision) => revision + 1);
+                select(created.sessionId);
+                setHandoff(created);
+              }}
+            />
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}