run-llama/chat-ui
1
0
Fork 0
mirror of https://github.com/run-llama/chat-ui.git synced 2026-07-21 11:25:22 -04:00
Code Issues 13 Packages Projects Releases 10 Wiki Activity

Performance issue with long streams #32

New Issue
Open
opened 2026-02-16 02:17:46 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 02:17:46 -05:00
Owner
Copy Link
Copy Source

Originally created by @wylswz on GitHub (Aug 16, 2025).

I was streaming llm output to UI token-by-token, and the webpage gets totally unresponsive after like 5000 words. However, when loading chat history using setMessages(), everything is ok.

Here is my code

export const ChatInterface: React.FC<ChatInterfaceProps> = ({
  sessionId,
}: ChatInterfaceProps) => {
  const handler = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat',
      body: {
        session_id: sessionId,
      },
    }),
  })
  
  useEffect(() => {
    getChatHistory(sessionId).then(messages => {
      handler.setMessages(messages.map(toMessage))
    })
    
  }, [sessionId])

  return (
    <div
      style={{
        height: 'calc(100vh - 120px)',
      }}
    >
      <ChatSection handler={handler} className="w-full">
        <ChatMessages/>
        <ChatInput>
          <ChatInput.Form>
            <ChatInput.Field placeholder="Type your message..." />
            <ChatInput.Upload />
            <ChatInput.Submit />
          </ChatInput.Form>
        </ChatInput>
      </ChatSection>
    </div>
  )
}
Originally created by @wylswz on GitHub (Aug 16, 2025). I was streaming llm output to UI token-by-token, and the webpage gets totally unresponsive after like 5000 words. However, when loading chat history using setMessages(), everything is ok. Here is my code ```tsx export const ChatInterface: React.FC<ChatInterfaceProps> = ({ sessionId, }: ChatInterfaceProps) => { const handler = useChat({ transport: new DefaultChatTransport({ api: '/api/chat', body: { session_id: sessionId, }, }), }) useEffect(() => { getChatHistory(sessionId).then(messages => { handler.setMessages(messages.map(toMessage)) }) }, [sessionId]) return ( <div style={{ height: 'calc(100vh - 120px)', }} > <ChatSection handler={handler} className="w-full"> <ChatMessages/> <ChatInput> <ChatInput.Form> <ChatInput.Field placeholder="Type your message..." /> <ChatInput.Upload /> <ChatInput.Submit /> </ChatInput.Form> </ChatInput> </ChatSection> </div> ) } ```
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: run-llama/chat-ui#32
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?