@jrkropp/codex-js-react 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @jrkropp/codex-js-react
 
+## 0.3.0
+
+### Minor Changes
+
+- Update the React package docs and examples around the split package model,
+  generated stylesheet import, and Cloudflare example integration path.
+
+### Patch Changes
+
+- Updated dependencies:
+  - @jrkropp/codex-js@0.3.0
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -1,19 +1,19 @@
 # @jrkropp/codex-js-react
 
-React UI for `@jrkropp/codex-js`, including `CodexChat`, hooks, shadcn-compatible primitives, and a generated stylesheet.
+React UI package for `@jrkropp/codex-js`. It includes `CodexChat`, React hooks, shadcn-compatible primitives, and generated CSS.
 
 ## Install
 
 ```sh
-pnpm add @jrkropp/codex-js @jrkropp/codex-js-react react react-dom
+npm install @jrkropp/codex-js @jrkropp/codex-js-react react react-dom
 ```
 
 Requirements:
 
 - Node.js 20 or newer.
-- ESM projects only. This package does not ship CommonJS.
+- ESM only. CommonJS output is not shipped.
 - React 18.3 or React 19.
-- A browser bundler that can import CSS.
+- A bundler that supports CSS imports.
 
 ## Usage
 
@@ -23,7 +23,11 @@ import { CodexChat } from "@jrkropp/codex-js-react";
 import "@jrkropp/codex-js-react/styles.css";
 
 const appServer = createCodexAppServerClient({
-	url: () => "ws://localhost:1466/api/codex/app-server",
+	url: async () => {
+		const session = await fetch("/api/codex/session", { method: "POST" });
+		const { webSocketUrl } = await session.json();
+		return webSocketUrl;
+	},
 });
 
 export function App() {
@@ -32,13 +36,12 @@ export function App() {
 			appServer={appServer}
 			threadId="00000000-0000-4000-8000-000000000001"
 			title="Codex"
-			subtitle="React package consumer"
 		/>
 	);
 }
 ```
 
-## Stable Imports
+## Public Imports
 
 ```ts
 import { CodexChat } from "@jrkropp/codex-js-react";
@@ -52,4 +55,4 @@ The React package exposes only:
 - `@jrkropp/codex-js-react/shadcn`
 - `@jrkropp/codex-js-react/styles.css`
 
-Runtime and server APIs remain in `@jrkropp/codex-js`.
+Runtime, server, and testing APIs live in `@jrkropp/codex-js`.

package/dist/index.js

@@ -6779,17 +6779,13 @@ function useTimelineRowContext() {
   }
   return context;
 }
-function MessageTimelineRow({
-  row
-}) {
+function MessageTimelineRow({ row }) {
   if (row.item.type === "UserMessage") {
     return /* @__PURE__ */ jsx(UserTimelineRow, { row });
   }
   return /* @__PURE__ */ jsx(AssistantTimelineRow, { row });
 }
-function UserTimelineRow({
-  row
-}) {
+function UserTimelineRow({ row }) {
   const copyText = userInputTextForCopy(row.item.content);
   return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "group relative max-w-[80%] rounded-2xl rounded-br-sm border border-border bg-secondary px-4 py-3", children: [
     /* @__PURE__ */ jsx(UserInputContent, { content: row.item.content }),
@@ -6811,7 +6807,13 @@ function AssistantTimelineRow({
   });
   return /* @__PURE__ */ jsxs("div", { className: "min-w-0 px-1 py-0.5", children: [
     row.showCompletionDivider ? /* @__PURE__ */ jsx(AssistantCompletionDivider, { row }) : null,
-    /* @__PURE__ */ jsx(ChatMarkdown_default, { text: messageText, isStreaming: row.item.phase === "streaming" }),
+    /* @__PURE__ */ jsx(
+      ChatMarkdown_default,
+      {
+        text: messageText,
+        isStreaming: row.item.phase === "streaming"
+      }
+    ),
     /* @__PURE__ */ jsx(
       AssistantChangedFilesSection,
       {
@@ -6865,7 +6867,9 @@ function WorkTimelineRow({
     expanded
   });
   const hasOverflow = row.groupedEntries.length > visible.entries.length;
-  const onlyToolEntries = row.groupedEntries.every((entry) => entry.tone === "tool");
+  const onlyToolEntries = row.groupedEntries.every(
+    (entry) => entry.tone === "tool"
+  );
   const showHeader = hasOverflow || !onlyToolEntries;
   const groupLabel = onlyToolEntries ? "Tool calls" : "Work log";
   return /* @__PURE__ */ jsxs(
@@ -7160,7 +7164,10 @@ function formatWorkingTimer(startIso, endIso) {
   if (!Number.isFinite(startedAtMs) || !Number.isFinite(endedAtMs)) {
     return null;
   }
-  const elapsedSeconds = Math.max(0, Math.floor((endedAtMs - startedAtMs) / 1e3));
+  const elapsedSeconds = Math.max(
+    0,
+    Math.floor((endedAtMs - startedAtMs) / 1e3)
+  );
   if (elapsedSeconds < 60) {
     return `${elapsedSeconds}s`;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jrkropp/codex-js-react",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React components and shadcn-compatible UI for codex-js.",
   "license": "Apache-2.0",
   "type": "module",
@@ -29,7 +29,7 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@jrkropp/codex-js": "^0.2.0",
+    "@jrkropp/codex-js": "^0.3.0",
     "@legendapp/list": "^3.0.0-beta.44",
     "@lexical/react": "^0.44.0",
     "class-variance-authority": "^0.7.1",