apps/web/src/features/conversation/hooks · scn-chat · Tangled

ATProto-based AI Assistant Chat interface.

scn-chat apps web src features conversation hooks

6 files

at admin-config-export

pouriade.com · The chat list and its rows do less work, from an audit against React performance practice. Opening a search hides the chat list inside React's Activity rather than unmounting it, so closing the search brings the chats back as they were rather than mounting every row again. A chat row no longer holds three mutations: renaming and tagging are an EditChat card and deleting a DeleteChat card, each holding its own, so an idle row holds none, and cancelling a failed change clears its error with the card. Picking a tag keeps the rows shown until its chats arrive, rather than a skeleton between. The month headings of older chats come from two formatters made once, rather than one made for each chat on every change to the list. A reply's sources and a search's results take the fold's ref apart, so React Compiler compiles them rather than silently leaving them out. The conversation's rename, instructions, and sync call their mutations' own functions, so the header no longer renders with every state either passes through, and its jump outline is built only while the jump stack is open. The search spec says the list stays mounted, and the list test checks it is hidden. · 2w ago

useAttachments.ts

Port the composer from design-reference. It is one card stuck to the panel's foot over a fade, with quotes and attachment chips at its top, a box that grows with its text and clears from its corner, and a toolbar of Attach, one quiet select for the model and its thinking effort in a submenu with timer pies, and Send, which Stop replaces while a reply runs. Files paste or drop anywhere on the conversation, Enter doesn't send on touch or while an input method composes, editing shows a banner, More quotes a reply into it, and a button above it jumps to the latest message. New chat goes to /, an empty conversation with starters whose first message creates the chat, reusing it when a send is tried again. The last effort is kept on the device, and ModelSelect and EffortSelect move onto the app's Select.

Port the composer from design-reference. It is one card stuck to the panel's foot over a fade, with quotes and attachment chips at its top, a box that grows with its text and clears from its corner, and a toolbar of Attach, one quiet select for the model and its thinking effort in a submenu with timer pies, and Send, which Stop replaces while a reply runs. Files paste or drop anywhere on the conversation, Enter doesn't send on touch or while an input method composes, editing shows a banner, More quotes a reply into it, and a button above it jumps to the latest message. New chat goes to /, an empty conversation with starters whose first message creates the chat, reusing it when a send is tried again. The last effort is kept on the device, and ModelSelect and EffortSelect move onto the app's Select.

useChat, in features/conversation/chat.ts, is the open conversation as a chat, in the shape of the AI SDK's useChat without a message list of its own: the branch on screen and the messages behind it from the browser store, whether they are on their way or known empty, the reply running at the end of the branch, and send, regenerate, and stop, on top of useConversation, the reply follower, and useBranch. Every turn, from a send, an edit, or a regeneration, follows its reply, puts its new message on the branch, replacing m, and calls the view's onTurnStarted, with which ConversationView scrolls to the bottom, so regenerating now scrolls there too, as sending and editing did. useStartChat sends a new chat's first message, creating the chat and reusing it after a failed send. The composer only builds the message and hands it to send, so it no longer knows the chat's key, creates chats, or posts, and BranchComposer and NewConversation pass send through. useBranch absorbs useScrollToFocus, scrolling to a message the URL focuses while a picked one keeps the scroll, so the shared page now scrolls to a linked message too. useConversationActions keeps renaming, the instructions, and syncing, and the conversation's one alert shows whichever action or turn ran last. Its tests cover sending, regenerating, stopping, the running reply, starting a chat, and scrolling to a focus, and the composer's tests check the message it hands to send. The web UI spec describes the chat.

useConversationActions.ts

The chat list and its rows do less work, from an audit against React performance practice. Opening a search hides the chat list inside React's Activity rather than unmounting it, so closing the search brings the chats back as they were rather than mounting every row again. A chat row no longer holds three mutations: renaming and tagging are an EditChat card and deleting a DeleteChat card, each holding its own, so an idle row holds none, and cancelling a failed change clears its error with the card. Picking a tag keeps the rows shown until its chats arrive, rather than a skeleton between. The month headings of older chats come from two formatters made once, rather than one made for each chat on every change to the list. A reply's sources and a search's results take the fold's ref apart, so React Compiler compiles them rather than silently leaving them out. The conversation's rename, instructions, and sync call their mutations' own functions, so the header no longer renders with every state either passes through, and its jump outline is built only while the jump stack is open. The search spec says the list stays mounted, and the list test checks it is hidden.

Port the composer from design-reference. It is one card stuck to the panel's foot over a fade, with quotes and attachment chips at its top, a box that grows with its text and clears from its corner, and a toolbar of Attach, one quiet select for the model and its thinking effort in a submenu with timer pies, and Send, which Stop replaces while a reply runs. Files paste or drop anywhere on the conversation, Enter doesn't send on touch or while an input method composes, editing shows a banner, More quotes a reply into it, and a button above it jumps to the latest message. New chat goes to /, an empty conversation with starters whose first message creates the chat, reusing it when a send is tried again. The last effort is kept on the device, and ModelSelect and EffortSelect move onto the app's Select.

useStickToBottom.ts

Port the composer from design-reference. It is one card stuck to the panel's foot over a fade, with quotes and attachment chips at its top, a box that grows with its text and clears from its corner, and a toolbar of Attach, one quiet select for the model and its thinking effort in a submenu with timer pies, and Send, which Stop replaces while a reply runs. Files paste or drop anywhere on the conversation, Enter doesn't send on touch or while an input method composes, editing shows a banner, More quotes a reply into it, and a button above it jumps to the latest message. New chat goes to /, an empty conversation with starters whose first message creates the chat, reusing it when a send is tried again. The last effort is kept on the device, and ModelSelect and EffortSelect move onto the app's Select.