Repository navigation
feat(ai-components): add stream-chat-react/ai-components entry point - #3314
Merged
Merged
Conversation
…arkdown library port (GetStream/ai-components-js#1) * feat: bootstrap rn ui sdk * feat: add custom rules as well * chore: cleanup * fix: blockquote bug * feat: refactor blockquote * fix: eslint issues * fix: prettier issues * fix: additional eslint issues * fix: various types of links * fix: minor cleanup * chore: refactor autolinks * fix: refactor link and fix other link types * chore: remove logs * chore: cleanup * feat: add support for various html elements * feat: add some more elements * feat: port textual components as well * chore: support number of lines for paragraphs * feat: refactor list support and fix nesting bugs * fix: return whitespace removal and make it more robust * feat: add code support * feat: add table support as well * chore: cleanup * fix: scrolling activation behaviour * fix: code parsing edge case * chore: push .idea config * chore: rerun prettier after rebase * chore: add vitest
…ode highlighting (GetStream/ai-components-js#3) * feat: implement code fencing properly and include code highlighting * chore: cleanup and optimizations * chore: fix eslint and faulty hooks * fix: some more eslint issues
…nents-js#5) * feat: port rn syntax highlighter * chore: cleanup * chore: remove lib * chore: export new component * chore: cleanup * chore: add recognition * feat: add support for charts and graphs * chore: figs visual bugs and qol improvements * chore: cleanup * refactor: extract generic chart component * chore: refactor charts and do some perf improvements on syntax highlights * feat: implement PerfText for Android for syntax highlighting * fix: ts issues * chore: clean up text style conversion parsing * refactor: charts ergonomics improvement * refactor: directory structure * refactor: syntax highlighter ergonomics * perf: implement self measuring view for android syntax highlighting and further ergonomic improvements * chore: remove redundant imports * refactor: final ergonomics refactoring * fix: remove extensions * fix: revert unwanted change
…er (GetStream/ai-components-js#2) * Add AIMessageComposer and StreamingMessage component * Adjust react-example * Minor adjustments and cleanup * Baseline styling
…ai-components-js#17) Migrates the React demo to NextJS.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @stream-io/chat-react-ai@0.1.0 ### Minor Changes - b4f5397: Initial release of the React SDK ## @stream-io/chat-react-native-ai@0.1.3 ### Patch Changes - ba28760: - Introduce expo config plugin for dictation permissions - Fix race condition when no permissions are yet present on ios dictation - Include Expo sample app as well - Fix wrong dependency graph resolution between RNCLI and Expo sample apps ## expochatgptsample@1.0.1 ### Patch Changes - ba28760: - Introduce expo config plugin for dictation permissions - Fix race condition when no permissions are yet present on ios dictation - Include Expo sample app as well - Fix wrong dependency graph resolution between RNCLI and Expo sample apps - Updated dependencies [ba28760] - @stream-io/chat-react-native-ai@0.1.3 ## ReactNativeChatGPTSample@0.0.3 ### Patch Changes - ba28760: - Introduce expo config plugin for dictation permissions - Fix race condition when no permissions are yet present on ios dictation - Include Expo sample app as well - Fix wrong dependency graph resolution between RNCLI and Expo sample apps ## react-chatbot@0.1.1 ### Patch Changes - Updated dependencies [b4f5397] - @stream-io/chat-react-ai@0.1.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…aining AI strings
…nounce AI state
- SubmitButton gets aria-label 'aria/Send'; FileInput's native input is
now visually hidden (not display:none) with aria-label 'aria/File upload',
so it is the single keyboard stop and opens the picker on Enter/Space;
its focus ring is drawn on the visible label
- :focus-visible outlines (SCR --str-chat__border-utility-focused) for
round buttons, select and attachment retry/delete buttons; the form shows
focus-within for the unset text input
- retry button is labelled with its action ('aria/Retry upload')
- AIStateIndicator is a polite live region and honours
prefers-reduced-motion
- axe + keyboard/focus coverage for a full composer
…ton when unsupported - SpeechToTextButton passes `options` to useSpeechToText instead of spreading it onto the <button> (no more options="[object Object]"); consumer onTranscript runs alongside the composer update, consumer onError replaces the console.error default - the button renders nothing without the Web Speech API (and until mount, so server and hydration markup match) instead of throwing on click - useSpeechToText wraps its callbacks in useStableCallback so inline callbacks no longer re-create the recognizer every render - drop the global Window augmentation from the shipped types; the constructor is read through a module-local typed cast - README documents the real SpeechToTextButton behaviour
…ze icons in ai-components.css - extend the ai-token() map (border, border-subtle, surface-hover, surface-pressed, button-bg, inline-code-bg, table-*, scrollbar-*), each falling back to an SCR semantic token that light and dark themes both resolve, then to the previous literal; still no --str-chat__ai-* declarations (R12) - model select chevron is drawn with currentColor gradients instead of a black SVG data URI; drop the empty --uploading block - composer/attachment icons are sized and filled (currentColor) by ai-components.css so it does not depend on index.css; drop the dead '> span' font-size rule - stylesheet tests: no colour literal outside var() fallbacks, every SCR fallback token exists for light and dark, icon sizing - README theming table lists every token
…d file-input id - AIMarkdown no longer spreads react-markdown's `node` onto <pre>/<code> DOM elements (still forwarded to custom components); a fenced block without a language is detected through a pre context and gets data-inline="false" instead of being treated as inline code - SuspendedChart wraps the lazy chart in a local error boundary that renders the raw-code fallback on chunk-load or chart.js errors and resets when the data changes - form reset keeps the `disabled` prop instead of re-enabling the composer - FileInput's id comes from SCR useStableId (React.useId on 18+), so server and client markup match on hydration
…pdate docs - validate-entry-isolation also walks relative dynamic import() specifiers (still passes; fails for both a static re-export and a dynamic import of AIComponents from src/index.ts) - prettier ignores generated examples/*/next-env.d.ts - ai-chatbot README: the default hosted agent server only serves Stream's demo app, so your own key needs your own agent server; implementation.md uses yarn instead of pnpm - ai-components README: raw aria/ keys outside <Chat>/TranslationProvider, FileInput keyboard semantics, chart error fallback
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configuration
You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Size Change: +31.8 kB (+2.91%) Total Size: 1.12 MB 📦 View Changed
ℹ️ View Unchanged
|
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## release-v14 #3314 +/- ##
==============================================
Coverage ? 85.63%
==============================================
Files ? 521
Lines ? 16555
Branches ? 5208
==============================================
Hits ? 14177
Misses ? 2378
Partials ? 0 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
github-actions Bot
pushed a commit
that referenced
this pull request
Oct 9, 2026
## [14.13.0](v14.12.2...v14.13.0) (2026-10-09) ### Bug Fixes * **store:** provide getServerSnapshot to useStateStore so server rendering works ([b82e406](b82e406)) ### Features * **ai-components:** add stream-chat-react/ai-components entry point ([84fb412](84fb412)) * **ai-components:** add stream-chat-react/ai-components entry point ([#3314](#3314)) ([627a890](627a890))
|
🎉 This PR is included in version 14.13.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Important
Merge this PR with "Create a merge commit". Do not squash. It imports the git history of
GetStream/ai-components-js(packages/react-sdkandexamples/react-chatbot), and squashing would flatten it. This is a one-off exception todevelopers/BRANCHES.md.🎯 Goal
Promote
@stream-io/chat-react-aiinto this SDK as a dedicated entry point,stream-chat-react/ai-components, and move the React chatbot sample toexamples/ai-chatbot, so AI customers get one package, one version line and one theme/i18n/icon system.Decisions and their rationale:
specs/ai-components-entrypoint/decisions.md, in the original planning checkout. That file isn't part of this PR; I can add it on request.🛠 Implementation details
New entry point
stream-chat-react/ai-components, built fromsrc/plugins/AIComponents/. It follows thechannel-detail/emojisplugin pattern: anexportssubpath, atypesVersionsentry, a Vite library entry, and asideEffectsentry for the chart module.stream-chat-react/css/ai-components.css.AIMarkdown,StreamingMessage,AIStateIndicator,AIMessageComposer(with its statics),useAttachments,useText,useIsDisabled,useAIMessageComposerContext,useSpeechToText, and their types.Ported onto SDK building blocks
StateStorefromstream-chatwith ouruseStateStore, replacing@stream-io/state-store.useStableCallback, and the main entry'suseMessageTextStreaming.Icon*viauseComponentContextIcons(), so icons can be overridden withWithComponents.t()for every string, translated in all 12 locales.Styling
aicr__*is renamed tostr-chat__ai-*.--str-chat__ai-*variables. Rules read them through fallback chains:var(--str-chat__ai-X, var(--str-chat__<theme token>, <literal>)). A consumer override at any scope wins, then the SDK theme (dark mode included), then the light default.Dependencies (regular deps, by decision)
chart.js ^4.5.1,react-chartjs-2 ^5.3.1,react-syntax-highlighter ^16.1.0andzod ^4.1.12.react-syntax-highlightergoes from upstream's pinned 15.5.0 to 16, because 15.x pinsprismjs ~1.27, which is affected by CVE-2024-53382. The tree now resolvesprismjs@1.30.0only.ai-componentsbundle them.yarn validate-entry-isolation, walks the main entry's ESM import graph and fails if it reaches any AI module or dependency.yarn types:scriptstype-checks the new.mtsscript.Core fix (separate
fix(store)commit)useStateStorenow passesgetServerSnapshot. Previously, server rendering of any component using it threw "Missing getServerSnapshot" on React 18/19. Client rendering is unchanged, and React 17's shim ignores the argument.Accessibility and robustness, compared with upstream
:focus-visiblerings.role="status"on the state indicator.prefers-reduced-motionsupport.SpeechToTextButtonoptionsprop is now forwarded; upstream dropped it and spread it onto the DOM. The button is hidden when the Web Speech API is missing; upstream threw on click.nodeattribute leaking from markdown.API changes compared with
@stream-io/chat-react-ai@0.2.0(the migration guide is insrc/plugins/AIComponents/README.md)stream-chat-react/ai-components, and load the stylesheet fromstream-chat-react/css/ai-components.css.useMessageTextStreamingis no longer re-exported. Use the main entry withstreamingLetterIntervalMs.material-symbolsis no longer needed.Example:
examples/ai-chatbot(Next.js 16). Runyarn build, copy.env.exampleto.env.local, thenyarn start:ai-chatbot.History and release safety
git filter-repo. Every imported commit message is prefixedchore(ai-import):, so it doesn't release, and#NNreferences are qualified asGetStream/ai-components-js#NN.GetStream/ai-components-js@0e74361b6cae347873645781d4fce7eadf522558. The SHA in the merge commit body is the filtered one.release-v14..HEADgivesminor, with 0 BREAKING markers.feat(ai-components)andfix(store).git bisect --first-parent.Verification
yarn types,build,validate-cjs,validate-esm,validate-entry-isolation,types:scriptsandexamples:buildall pass.yarn install --immutablepasses.yarn testpasses: 240 files, 3018 tests. Thesrc/plugins/AIComponentsfolder has about 73% line coverage. Live Web Speech recognition and chart.js canvas rendering can't run in jsdom.Follow-ups (not in this PR)
master(v15): re-merge the same filtered history, then cherry-pick this PR's commits.@stream-io/chat-react-aion npm.PrismLight).UseMessageTextStreamingProps.langfollow the active locale.AIStateIndicatortext consistent between server and client.🎨 UI Changes
The composer and markdown look the same as upstream, apart from:
Screenshots to be added.