@opengeni/react 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -40,11 +40,13 @@
     "demo:build": "vite build demo"
   },
   "dependencies": {
-    "@opengeni/sdk": "^0.2.0",
+    "@opengeni/sdk": "^0.3.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "motion": "^12.0.0",
     "radix-ui": "^1.4.3",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {

package/src/client.ts

@@ -7,6 +7,8 @@ import type { OpenGeniClient } from "@opengeni/sdk";
  */
 export type SessionClientLike = Pick<
   OpenGeniClient,
+  // Deployment config (host-exposed models, auth, upload limits)
+  | "getClientConfig"
   // Sessions, events, composer
   | "getSession"
   | "listSessions"

package/src/components/chat-composer.tsx

@@ -1,4 +1,4 @@
-import type { SessionStatus } from "@opengeni/sdk";
+import type { ClientModel, SessionStatus } from "@opengeni/sdk";
 import { ArrowUpIcon, FileIcon, ImageIcon, LoaderCircleIcon, PaperclipIcon, SquareIcon, XIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, type ChangeEvent, type ClipboardEvent, type DragEvent, type KeyboardEvent, type ReactNode } from "react";
@@ -12,6 +12,7 @@ import { useSlashCommands, type ConfirmState, type SlashCommandContext } from ".
 import { cn } from "../lib/cn";
 import { formatBytes } from "../lib/format";
 import { CommandPalette } from "./command-palette";
+import { ModelPicker } from "./model-picker";
 
 export type ChatComposerProps = {
   composer: ComposerState;
@@ -37,6 +38,20 @@ export type ChatComposerProps = {
    * Absent → no attachment UI renders and the composer behaves exactly as before.
    */
   attachments?: UseFileAttachmentsResult | undefined;
+  /**
+   * Opt-in model picker. When supplied (e.g. from {@link useAvailableModels}),
+   * the composer renders a {@link ModelPicker} at the start of `controlsStart`
+   * so the operator can choose which host-exposed model serves the next message.
+   * The host owns the selection (`selectedModel`/`onSelectModel`) and is
+   * responsible for threading it into the composer's `sendExtras` (typically
+   * `useComposer({ sendExtras: () => ({ model }) })`) so `composeSendInput`
+   * carries it. Absent → no picker renders and the composer behaves as before.
+   */
+  models?: ClientModel[] | undefined;
+  /** The currently selected model id (the picker's controlled value). */
+  selectedModel?: string | undefined;
+  /** Called with the chosen model id when the operator picks one. */
+  onSelectModel?: ((modelId: string) => void) | undefined;
   className?: string | undefined;
   /**
    * Slash-command palette. Defaults to the built-in {@link defaultCommands};
@@ -77,6 +92,9 @@ export function ChatComposer({
   header,
   onPaste,
   attachments,
+  models,
+  selectedModel,
+  onSelectModel,
   className,
   commands = defaultCommands,
   commandContext,
@@ -376,7 +394,7 @@ export function ChatComposer({
             />
           ) : (
             <div className="flex items-center justify-between gap-2 px-2.5 pb-2.5 pt-1">
-              {attachments || controlsStart ? (
+              {attachments || models || controlsStart ? (
                 <span className="flex min-w-0 items-center gap-1.5">
                   {attachments ? (
                     <>
@@ -403,6 +421,14 @@ export function ChatComposer({
                       </button>
                     </>
                   ) : null}
+                  {models ? (
+                    <ModelPicker
+                      models={models}
+                      value={selectedModel}
+                      onChange={(modelId) => onSelectModel?.(modelId)}
+                      disabled={disabled === true}
+                    />
+                  ) : null}
                   {controlsStart}
                 </span>
               ) : (

package/src/components/markdown.tsx

@@ -0,0 +1,170 @@
+import { memo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn } from "../lib/cn";
+
+/**
+ * The default renderer for chat message bodies in {@link MessageTimeline}.
+ *
+ * Agent (and user) messages arrive as GitHub-flavored markdown. This turns the
+ * raw text into styled HTML using `react-markdown` + `remark-gfm`, themed to the
+ * package's `og-*` design tokens so it reads as one cohesive dark surface — no
+ * stock Tailwind colors leak in.
+ *
+ * It re-parses on every render, which is exactly right for streaming: a body
+ * that is still arriving (an unterminated `**`, a half-open code fence, a table
+ * mid-row) renders as best-effort markdown and resolves cleanly as the rest of
+ * the tokens land. Consumers who want a different renderer can still pass
+ * `renderMessageText` to `MessageTimeline` to override this entirely.
+ */
+export type MarkdownProps = {
+  children: string;
+  className?: string | undefined;
+};
+
+/* --- element renderers (themed to og-* tokens) ------------------------------ */
+
+const components: Components = {
+  h1: ({ children, ...props }) => (
+    <h1 className="mt-5 mb-2.5 text-xl font-semibold tracking-tight text-og-fg first:mt-0" {...props}>
+      {children}
+    </h1>
+  ),
+  h2: ({ children, ...props }) => (
+    <h2 className="mt-5 mb-2 text-lg font-semibold tracking-tight text-og-fg first:mt-0" {...props}>
+      {children}
+    </h2>
+  ),
+  h3: ({ children, ...props }) => (
+    <h3 className="mt-4 mb-1.5 text-[15px] font-semibold tracking-tight text-og-fg first:mt-0" {...props}>
+      {children}
+    </h3>
+  ),
+  h4: ({ children, ...props }) => (
+    <h4 className="mt-4 mb-1.5 text-sm font-semibold uppercase tracking-[0.04em] text-og-fg-muted first:mt-0" {...props}>
+      {children}
+    </h4>
+  ),
+  p: ({ children, ...props }) => (
+    <p className="my-2.5 leading-7 first:mt-0 last:mb-0" {...props}>
+      {children}
+    </p>
+  ),
+  strong: ({ children, ...props }) => (
+    <strong className="font-semibold text-og-fg" {...props}>
+      {children}
+    </strong>
+  ),
+  em: ({ children, ...props }) => (
+    <em className="italic" {...props}>
+      {children}
+    </em>
+  ),
+  a: ({ children, ...props }) => (
+    <a
+      className="break-words font-medium text-og-accent underline-offset-2 hover:underline"
+      target="_blank"
+      rel="noreferrer noopener"
+      {...props}
+    >
+      {children}
+    </a>
+  ),
+  ul: ({ children, ...props }) => (
+    <ul className="my-2.5 ml-5 flex list-disc flex-col gap-1 marker:text-og-fg-subtle first:mt-0 last:mb-0" {...props}>
+      {children}
+    </ul>
+  ),
+  ol: ({ children, ...props }) => (
+    <ol className="my-2.5 ml-5 flex list-decimal flex-col gap-1 marker:text-og-fg-subtle first:mt-0 last:mb-0" {...props}>
+      {children}
+    </ol>
+  ),
+  // GFM task-list items carry a leading checkbox <input>; `list-none` + a
+  // negative margin pull the checkbox back to the bullet column so it aligns
+  // with the text.
+  li: ({ children, ...props }) => (
+    <li className="leading-7 marker:text-og-fg-subtle [&>ul]:my-1 [&>ol]:my-1 [&:has(>input)]:list-none [&:has(>input)]:-ml-5" {...props}>
+      {children}
+    </li>
+  ),
+  input: ({ type, ...props }) =>
+    type === "checkbox" ? (
+      <input
+        {...props}
+        type="checkbox"
+        disabled
+        className="mr-2 size-3.5 translate-y-[2px] cursor-default appearance-none rounded-[3px] border border-og-border bg-og-surface-1 align-baseline checked:border-og-accent checked:bg-og-accent checked:[background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M2.5%206.2l2.2%202.2%204.6-4.8%22%2F%3E%3C%2Fsvg%3E')] checked:bg-[length:11px_11px] checked:bg-center checked:bg-no-repeat"
+      />
+    ) : (
+      <input type={type} {...props} />
+    ),
+  blockquote: ({ children, ...props }) => (
+    <blockquote
+      className="my-3 border-l-2 border-og-border-strong pl-3.5 text-og-fg-muted [&>p]:my-1.5 first:mt-0 last:mb-0"
+      {...props}
+    >
+      {children}
+    </blockquote>
+  ),
+  hr: (props) => <hr className="my-4 border-0 border-t border-og-border" {...props} />,
+  // Inline `code` vs fenced code blocks. react-markdown v10 no longer passes an
+  // `inline` flag; a fenced block is a <code> whose parent is <pre> (styled by
+  // the `pre` renderer), so a `code` reaching here is treated as inline.
+  code: ({ children, className: _className, ...props }) => (
+    <code
+      className="rounded-og-xs border border-og-border bg-og-surface-1 px-1 py-0.5 font-og-mono text-[0.85em] text-og-fg"
+      {...props}
+    >
+      {children}
+    </code>
+  ),
+  // Fenced code blocks — mirror the timeline's PayloadBlock <pre> styling for
+  // visual consistency (bordered, scrollable, mono, surface background).
+  pre: ({ children, ...props }) => (
+    <pre
+      className="my-3 max-h-96 overflow-auto rounded-og-md border border-og-border bg-og-bg/60 p-3 font-og-mono text-[12.5px] leading-5 text-og-fg-muted [&>code]:border-0 [&>code]:bg-transparent [&>code]:p-0 [&>code]:text-inherit first:mt-0 last:mb-0"
+      {...props}
+    >
+      {children}
+    </pre>
+  ),
+  table: ({ children, ...props }) => (
+    <div className="my-3 max-w-full overflow-x-auto rounded-og-md border border-og-border first:mt-0 last:mb-0">
+      <table className="w-full border-collapse text-[13px]" {...props}>
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children, ...props }) => (
+    <thead className="bg-og-surface-1" {...props}>
+      {children}
+    </thead>
+  ),
+  th: ({ children, ...props }) => (
+    <th className="border-b border-og-border px-3 py-1.5 text-left font-medium text-og-fg" {...props}>
+      {children}
+    </th>
+  ),
+  td: ({ children, ...props }) => (
+    <td className="border-b border-og-border px-3 py-1.5 align-top text-og-fg-muted [tr:last-child>&]:border-b-0" {...props}>
+      {children}
+    </td>
+  ),
+  img: ({ alt, ...props }) => <img alt={alt ?? ""} className="my-3 max-w-full rounded-og-md border border-og-border" {...props} />,
+};
+
+function MarkdownImpl({ children, className }: MarkdownProps) {
+  return (
+    // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
+    // long links and code blocks wrap/scroll instead of forcing overflow.
+    <div className={cn("min-w-0 break-words", className)}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+/** Memoized so streaming re-renders of the parent don't re-parse settled bodies. */
+export const Markdown = memo(MarkdownImpl);

package/src/components/message-timeline.tsx

@@ -14,6 +14,7 @@ import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { Collapsible } from "radix-ui";
 import { cn } from "../lib/cn";
 import { formatRelativeTime, stringifyPayload, truncate } from "../lib/format";
+import { Markdown } from "./markdown";
 import {
   buildTimeline,
   compactPayloadPreview,
@@ -175,8 +176,8 @@ function UserMessageRow({
 }) {
   return (
     <div className="animate-og-enter flex justify-end">
-      <div className="max-w-[85%] rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-[15px] leading-6 text-og-fg">
-        {renderMessageText ? renderMessageText(item.text, item) : <span className="whitespace-pre-wrap">{item.text}</span>}
+      <div className="max-w-[85%] min-w-0 rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-[15px] leading-6 text-og-fg">
+        {renderMessageText ? renderMessageText(item.text, item) : <Markdown>{item.text}</Markdown>}
       </div>
     </div>
   );
@@ -189,10 +190,25 @@ function AgentMessageRow({
   item: AgentMessageItem;
   renderMessageText?: ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
 }) {
+  const caret = item.streaming ? (
+    <span className="ml-0.5 inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-og-blink rounded-full bg-og-accent" aria-hidden />
+  ) : null;
   return (
-    <div className="animate-og-enter text-[15px] leading-7 text-og-fg">
-      {renderMessageText ? renderMessageText(item.text, item) : <span className="whitespace-pre-wrap">{item.text}</span>}
-      {item.streaming ? <span className="ml-0.5 inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-og-blink rounded-full bg-og-accent" aria-hidden /> : null}
+    <div className="animate-og-enter min-w-0 text-[15px] leading-7 text-og-fg">
+      {renderMessageText ? (
+        <>
+          {renderMessageText(item.text, item)}
+          {caret}
+        </>
+      ) : (
+        // While streaming, let the caret ride the end of the last rendered line:
+        // the trailing block (usually a <p>) flows inline so the caret sits on
+        // its baseline instead of dropping to a new line.
+        <div className={item.streaming ? "[&_>div>:last-child]:inline" : undefined}>
+          <Markdown>{item.text}</Markdown>
+          {caret}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/model-picker.tsx

@@ -0,0 +1,87 @@
+import type { ClientModel } from "@opengeni/sdk";
+import { ChevronDownIcon } from "lucide-react";
+import { useId, useMemo } from "react";
+import { cn } from "../lib/cn";
+
+export type ModelPickerProps = {
+  /** The host-exposed models to choose from (typically {@link useAvailableModels}). */
+  models: ClientModel[];
+  /** Controlled selection — the model id, or undefined for "nothing chosen yet". */
+  value?: string | undefined;
+  /** Called with the chosen model id when the operator picks a row. */
+  onChange: (modelId: string) => void;
+  disabled?: boolean | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * The model picker — a compact dropdown for the composer footer, grouping the
+ * host-exposed models by `providerLabel` (so "OpenAI" and "Fireworks AI" head
+ * their own sections) and showing each model's display `label`. A native
+ * `<select>` keeps it keyboard- and screen-reader-accessible for free and
+ * themes via the package's og-* tokens; the chevron is a decorative overlay.
+ *
+ * Controlled: the host owns `value`/`onChange` and threads the selection into
+ * the send path. Renders nothing when no models are exposed, so a single-model
+ * deployment shows no chrome.
+ */
+export function ModelPicker({ models, value, onChange, disabled, className }: ModelPickerProps) {
+  const selectId = useId();
+  // Group by provider, preserving first-seen order for both the providers and
+  // the models within each — the server already orders the list (default model
+  // and built-in provider first), so we must not re-sort it.
+  const groups = useMemo(() => {
+    const byProvider = new Map<string, { label: string; models: ClientModel[] }>();
+    for (const model of models) {
+      let group = byProvider.get(model.provider);
+      if (!group) {
+        group = { label: model.providerLabel, models: [] };
+        byProvider.set(model.provider, group);
+      }
+      group.models.push(model);
+    }
+    return [...byProvider.values()];
+  }, [models]);
+
+  if (models.length === 0) {
+    return null;
+  }
+
+  return (
+    <span className={cn("relative inline-flex items-center", className)}>
+      <label htmlFor={selectId} className="sr-only">
+        Model
+      </label>
+      <select
+        id={selectId}
+        value={value ?? ""}
+        onChange={(event) => onChange(event.target.value)}
+        disabled={disabled === true}
+        aria-label="Model"
+        className={cn(
+          // Sized like the other footer controls; the chevron overlay needs the
+          // right padding so the value never collides with it.
+          "h-8 max-w-[180px] cursor-pointer appearance-none truncate rounded-og-md bg-transparent",
+          "py-0 pl-2 pr-6 text-[13px] text-og-fg-muted",
+          "transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
+          "focus:outline-none focus-visible:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+        )}
+      >
+        {groups.map((group) => (
+          <optgroup key={group.label} label={group.label}>
+            {group.models.map((model) => (
+              <option key={model.id} value={model.id}>
+                {model.label}
+              </option>
+            ))}
+          </optgroup>
+        ))}
+      </select>
+      <ChevronDownIcon
+        aria-hidden
+        className="pointer-events-none absolute right-1.5 size-3.5 text-og-fg-subtle"
+      />
+    </span>
+  );
+}

package/src/hooks/use-available-models.ts

@@ -0,0 +1,39 @@
+import type { ClientModel } from "@opengeni/sdk";
+import { useCallback } from "react";
+import { useOpenGeniClient, type ClientOverride } from "../provider";
+import { usePolledValue } from "./internal";
+
+export type UseAvailableModelsOptions = Pick<ClientOverride, "client"> & {
+  /** Refresh interval (ms). Off by default — the host model list rarely moves. */
+  pollIntervalMs?: number | undefined;
+  enabled?: boolean | undefined;
+};
+
+export type UseAvailableModelsResult = {
+  /** The provider-grouped models the host exposes (empty until loaded). */
+  models: ClientModel[];
+  /** The deployment's default model id, null until loaded. */
+  defaultModel: string | null;
+  loading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+};
+
+/**
+ * The host-exposed model list for a <ModelPicker>: fetches the deployment's
+ * public client config (`GET /v1/config/client`) and surfaces the richer
+ * provider-grouped `models` plus the `defaultModel` the picker should preselect.
+ * Deployment-scoped, so it only needs the client (no workspace).
+ */
+export function useAvailableModels(options: UseAvailableModelsOptions = {}): UseAvailableModelsResult {
+  const client = useOpenGeniClient(options);
+  const load = useCallback(async () => await client.getClientConfig(), [client]);
+  const state = usePolledValue(load, { pollIntervalMs: options.pollIntervalMs, enabled: options.enabled });
+  return {
+    models: state.data?.models ?? [],
+    defaultModel: state.data?.defaultModel ?? null,
+    loading: state.loading,
+    error: state.error,
+    refresh: state.refresh,
+  };
+}

package/src/index.ts

@@ -43,6 +43,8 @@ export { useWorkspaces } from "./hooks/use-workspaces";
 export type { UseWorkspacesOptions, UseWorkspacesResult } from "./hooks/use-workspaces";
 export { useBillingUsage } from "./hooks/use-billing-usage";
 export type { UseBillingUsageOptions, UseBillingUsageResult } from "./hooks/use-billing-usage";
+export { useAvailableModels } from "./hooks/use-available-models";
+export type { UseAvailableModelsOptions, UseAvailableModelsResult } from "./hooks/use-available-models";
 
 // Pending-approvals projection
 export { approvalsFromRequiresAction, projectPendingApprovals } from "./approvals";
@@ -103,8 +105,12 @@ export type { CommandPaletteProps } from "./components/command-palette";
 // Components
 export { ChatComposer } from "./components/chat-composer";
 export type { ChatComposerProps } from "./components/chat-composer";
+export { ModelPicker } from "./components/model-picker";
+export type { ModelPickerProps } from "./components/model-picker";
 export { MessageTimeline } from "./components/message-timeline";
 export type { MessageTimelineProps } from "./components/message-timeline";
+export { Markdown } from "./components/markdown";
+export type { MarkdownProps } from "./components/markdown";
 export { SessionStatus, StatusDot, SESSION_STATUS_META } from "./components/session-status";
 export type { SessionStatusProps, StatusDotProps, SessionStatusMeta } from "./components/session-status";
 export { FleetTile, sessionDisplayTitle } from "./components/fleet-tile";