Skip to content

feat(platform/react): Base44ChatProvider, reading hooks and parts - #335

Open
amitbardos wants to merge 1 commit into
amitb/platform-react-hook-onlyfrom
amitb/platform-react-provider
Open

amitbardos wants to merge 1 commit into
amitb/platform-react-hook-onlyfrom
amitb/platform-react-provider

Conversation

@amitbardos

Copy link
Copy Markdown
Contributor

Stacked on base44/javascript-sdk#315 (the hook). Supersedes base44/javascript-sdk#314, which was written against the hook's earlier contract. Design and alternatives: Partner chat: provider design.

What

The drawing layer above useBase44Chat. It adds nothing below the hook's contract.

<Base44ChatProvider appId={appId} backend={backend} onAppCreated={selectApp}
  components={{ question: { Choice, Secrets, Approval } }}>
  <Messages />   {/* useChatState().items, each drawn with <Message item={item} /> */}
  <Composer />   {/* useChatState().status, useChatActions().send */}
</Base44ChatProvider>
  • <Base44ChatProvider> runs the hook once and shares it through context.
  • Two reading hooks. useChatState() returns items, status, connection and error, and re-renders on every event. useChatActions() returns send, create and clearError, and keeps its identity while the app stays the same, also with an inline backend or onAppCreated.
  • Question parts are required. TypeScript refuses components.question without Choice, Secrets and Approval. A release that adds a kind adds a part, so the upgrade names it; until then the hook declines the kind.
  • Message parts are optional. Text and Step fall back to plain HTML with a data-base44 attribute and no classes.
  • <Message> draws the text, then each step followed by its open question. It adds no element of its own. <Question> draws a question anywhere below the provider.
  • Message, Question and the reading hooks throw a clear error outside a provider.

Packaging

TSX support in tsconfig, the type tests, vitest and eslint. Every new module starts with "use client", which the package test asserts.

Tests

  • tests/unit/react/provider.test.tsx: draw order, each part answering its own tool call, replaced parts, pending prompts, <Question> elsewhere, errors outside a provider, re-render and identity stability with inline props.
  • tests/types/react-provider.types.tsx: required question parts, no Unknown, bound actions per kind.
  • tests/package.test.mjs: the new exports resolve from the tarball, and the declarations compile under NodeNext, Bundler and Node.

npm test -w @base44/platform and lint pass locally.

Not in this PR

The Tiny Sunny example (examples/react-chat) from #314. It follows once the design doc settles whether to ship message primitives.

🤖 Generated with Claude Code

…t draw the chat

<Base44ChatProvider> runs useBase44Chat once and shares it through context:
useChatState() for items, status, connection and error, useChatActions() for
send, create and clearError, stable across inline backend and onAppCreated.

<Message> draws an item in a fixed order: text, then each step followed
by its open question. A part for every question kind (Choice, Secrets,
Approval) is required, so a new kind is a compile-time prompt on upgrade;
the hook declines it until then. Text and Step fall back to plain HTML.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

🚀 Package Preview Available!


Install this PR's preview build with npm:

npm i @base44-preview/sdk@0.8.54-pr.335.2bd5f4f

Prefer not to change any import paths? Install using npm alias so your code still imports @base44/sdk:

npm i "@base44/sdk@npm:@base44-preview/sdk@0.8.54-pr.335.2bd5f4f"

Or add it to your package.json dependencies:

{
  "dependencies": {
    "@base44/sdk": "npm:@base44-preview/sdk@0.8.54-pr.335.2bd5f4f"
  }
}

Preview published to npm registry — try new features instantly!

@github-actions

Copy link
Copy Markdown
Contributor

🚀 Package Preview Available! (@base44/platform)


Install this PR's preview build with npm:

npm i @base44-preview/platform@0.2.0-pr.335.2bd5f4f

Prefer not to change any import paths? Install using npm alias so your code still imports @base44/platform:

npm i "@base44/platform@npm:@base44-preview/platform@0.2.0-pr.335.2bd5f4f"

Or add it to your package.json dependencies:

{
  "dependencies": {
    "@base44/platform": "npm:@base44-preview/platform@0.2.0-pr.335.2bd5f4f"
  }
}

Preview published to npm registry — try new features instantly!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant