ta
TanStack
OSS
ta
Pipelines
Nx runs
Insights
Compare tasks
Analytics
Sign in
Toggle Sidebar
vi
virtual
Pipelines
docs(examples): rebuild the React chat example as a ChatGPT-style app (#1331) * docs(examples): rebuild the React chat example as a ChatGPT-style layout Replace the debug toolbar with a sidebar (new chat, chat history) and a message pane with a composer. Data comes from an in-memory mock API through TanStack Query: chats via useQuery, messages via useInfiniteQuery with older pages prepended, and sends via useMutation. Assistant replies are generated and streamed word by word into the query cache, so the example needs no server or API key. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(examples): fix clipped sidebar rows and small icons in the chat example The chat list rows shrank below their text height once the list overflowed, which cut off the text and the selected-row highlight on phones. Keep them at their natural height, and replace the text-glyph icons with 20px SVG icons in 40px buttons. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(examples): jump to the end after a send in the chat example The empty assistant reply is added in the same render as the user message, so the last message was never the user's and scrollToEnd() never ran. Watch the latest user message instead, and skip the first render. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(examples): hide the jump button when the chat opens at the end React's onScroll runs before the virtualizer reads the scroll event, so isAtEnd() there saw the previous position and the button stayed visible after the list landed at the end. Update the at-end state in the virtualizer's onChange instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(examples): simplify the chat example - Seed 5 chats instead of 25, and generate replies from one sentence bank (no lists or code blocks), so the mock API and rendering are shorter. - Add the streamed reply with its first words, which removes the typing indicator and fixes an empty reply left behind by an early Stop. - Scroll to the end in one layout effect keyed on the latest user message, replacing the initial-scroll state, the seen-message ref and the history-load timer. - Let the composer grow with field-sizing: content instead of JavaScript. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(examples): add prompt hints to the empty chat Show three prompts under the composer when no chat is open. A tap sends the prompt as the first message, so a new chat and a streamed reply start in one step. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(examples): link the chat blog post and add icons to the prompt hints - Answer "How do I virtualize a chat list?" with a fixed reply that links Tanner Linsley's "Chat UIs Are Lists Until They Aren't", and render links in assistant messages. - Add a colored Feather icon to each prompt hint. - Rename the seeded "Plan a weekend in Kraków" chat to Rzeszów. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(examples): keep the chat opened while a send is in flight The send selects its chat when it finishes, about 100 ms later. Opening another chat in that time was undone. Select the sent-to chat only when the selection has not changed since the send started. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * docs(examples): load older messages after a direct jump to the top The scroll handler returned early when isAtEnd() was true. React's onScroll runs before the virtualizer reads the event, so after one jump from the end to the top it still saw the old position, skipped the load and did not record scrollTop. Drop the check: scrolling up near the top already gates the load. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
nx run-many --targets=test:sherif,test:knip,test:docs,test:eslint,test:lib,test:e2e,test:types,test:build,build
⌘K
docs(examples): rebuild the React chat example as a ChatGPT-style app (#1331)
Succeeded
in
4m 32s
Started
Linux
4 CPU cores
read
access token used
Copy command
nx run-many --targets=test:sherif,test:knip,test:docs,test:eslint,test:lib,test:e2e,test:types,test:build,build
main
bdaf32b
GitHub
Open on GitHub
Tasks
Resource Usage
ta
TanStack
OSS