Added Streaming output rendering functionality #7
Conversation
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
Added streaming support for chat messages using a new `sendStreamMessage` method in `ChatService`. Introduced streaming payload settings and incremental rendering of assistant responses. Updated API client to support stream-based fetching and refined error handling.
Refactored chat message handling to ensure state updates by creating new message objects during streaming. Adjusted stream settings for improved responsiveness by reducing chunk size and delay. Added comments for clarity when initializing user and assistant messages.
Introduced `MessageHandlerConfig` for flexible response settings. Split message handling into streaming and synchronous workflows, allowing finer-grained control over chat behavior. Updated `ChatInput` to pass configuration dynamically based on the usage of streaming.
Moved `ChatContainer` prop and type definitions to the shared `chat.ts` types file for better modularity and reuse. This reduces redundancy and improves maintainability across components.
# Conflicts: # src/components/ChatContainer/ChatContainer.tsx
Refactored `handleMessageSubmit` to support both streaming and synchronous responses. Introduced new utility functions `handleStreamingResponse` and `handleSyncResponse` for better separation of concerns. Updated `ChatInput` and related props to incorporate streaming functionality.
Introduced a `StreamingToggle` button to toggle between streaming and non-streaming responses. Integrated the toggle functionality into `ChatInput` and `ChatContainer`, allowing dynamic control of streaming behavior via a new `onStreamingChange` handler. This enhances user customization in interacting with the chat system.
Updated button paddings, sizes, titles, and hover states for better UX across `ToolsToggle`, `StreamingToggle`, and `LLMProviderToggle`. Removed redundant test cases and streamlined imports by relocating `LLMProviderToggle`. These changes enhance maintainability and visual harmony.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This pull request introduces several changes to the chat functionality, focusing on adding support for streaming responses and refactoring the existing code to improve maintainability. The most important changes include the addition of streaming response handling, updates to the
ChatServiceto support streaming, and modifications to theChatContainerandChatInputcomponents to accommodate these new features.Streaming Response Handling:
src/components/ChatContainer/ChatContainer.tsx: Added a new stateuseStreamingand modified thehandleMessageSubmitfunction to handle streaming responses using the newhandleStreamingResponseandhandleSyncResponsefunctions. [1] [2] [3] [4] [5]src/components/ChatInput/ChatInput.tsx: Updated theonSubmitfunction to accept aMessageHandlerConfigparameter and handle streaming settings. [1] [2] [3]src/services/ChatService.ts: Added thesendStreamMessagefunction to handle streaming responses from the API. [1] [2]src/types/chat.ts: Added new interfacesStreamSettingsandMessageHandlerConfigto support streaming configurations.Code Refactoring:
src/components/ChatContainer/ChatContainer.tsx: Refactored theChatContainerPropsinterface to move it to thetypes/chat.tsfile.src/services/APIClient.ts: Added a newfetchStreammethod to handle streaming API requests.