feat(writing assistant): auto-scroll and follow-up #447
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This pull request enhances the Writing Assistant component with follow-up functionality and auto-scrolling, improving user interaction and conversation flow.
- Introduced new
ConversationHistorycomponent in/src/components/WritingAssistant/ConversationHistory.tsxfor displaying chat history with auto-scrolling - Added streaming functionality for real-time response generation in
WritingAssistant.tsx - Implemented follow-up text field and modified
getLLMResponsefunction to handle message history inWritingAssistant.tsx - Enhanced
generatePromptStringfunction inutils.tsto support continuous interactions and improved context handling
3 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
| {history.map((message) => ( | ||
| <div className={`mb-2 rounded-md p-2 ${message.role === 'user' ? 'bg-blue-500' : 'bg-gray-500'}`}> | ||
| <p className="font-bold">{message.role === 'user' ? 'You' : 'Assistant'}:</p> | ||
| <ReactMarkdown rehypePlugins={[rehypeRaw]} className="markdown-content break-words"> | ||
| {convertMessageToString(message)} | ||
| </ReactMarkdown> | ||
| </div> |
There was a problem hiding this comment.
logic: Add a unique 'key' prop to the outer div of the mapped messages to improve React's rendering performance
| useEffect(() => { | ||
| bottomRef.current?.scrollIntoView({ behavior: 'smooth' }) | ||
| }, [history, streamingMessage]) |
There was a problem hiding this comment.
style: Consider using a more efficient scrolling method, such as scrolling only when new content is added, to prevent unnecessary scrolling on every render
| return ( | ||
| <div className="mt-4 overflow-y-auto" style={{ maxHeight: markdownMaxHeight }}> | ||
| {history.map((message) => ( | ||
| <div className={`mb-2 rounded-md p-2 ${message.role === 'user' ? 'bg-blue-500' : 'bg-gray-500'}`}> |
There was a problem hiding this comment.
style: The background color classes 'bg-blue-500' and 'bg-gray-500' might not provide enough contrast with the text. Ensure the color scheme meets accessibility standards
There was a problem hiding this comment.
thanks for working on this. looks mostly good to me.
the only thing i think needs improvement is the conversation history:
- it should be rendered inside a reactmarkdown component
- the user message shows the full prompt, not just what they typed in the input field
- i'm not sure about the chat kind of ui in conversation history that shows messages in chat bubbles because this is writing assistant not chat:
- one idea i had for the ui was that instead of chat history, for each follow up we could render it by itself (without showing old follow ups) and then have back and forth navigation buttons at the top of the writing assistant to navigate between past follow ups
Please look at the latest commit. It is a WIP but is it the UI we want? |
|
yes i think that's what i had in mind. i'd suggest that no need to show the user messages at all and only show assistant message for V1. |
In the latest commit it only shows the assistant message. If this is good then I'll clean things up and finalize it. |
|
yes it look good to me :) i'd propose to remove the "Assistant: " thing and move buttons (apart from next and previous btns) to the bottom of the component |
|
please take a look at the latest commit |
#442