-
Notifications
You must be signed in to change notification settings - Fork 323
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Install fetch event source to handle SSEs * Add docs chatbot modal UI. * Update Modal and Icon components. * Add no scroll class. * Add DocChat component. * Installed fetch event source. * Add light theme styles. Clean up code. * Remove unneeded React import. * Adjust copy as deployment test change. * Undo test changes. * Add Mendable URLs to CSP. * Add markdown rendering support for chatbot responses. * Yarn lock update. * Adjust modal layout spacing. * Fix chatbot modal styling for mobile screens. * Add UI for rating bot responses. * Temporarily disable response rating feature. * Add server API endpoint for processing Base GPT response rating requests. * Update csp for new API version. * Add CCA events for GPT interactions. Fix id data types. * Swap in prod client-side API keys. * Use session storage for conversation data. * Swap in prod client-side API keys. * Remove unneeded log. * Simplify state updates. * Replace dangerouslySetInnerHTML with useRef innerHTML. * Updated yarn.lock * Swap in test API key for dev. * Fix typo. * Swap in prod client-side key. * Temporarily remove sources. Adjust scroll behavior. Adjust modal close handler. Update API keys.
- Loading branch information
1 parent
691cfab
commit 8fbeb79
Showing
24 changed files
with
1,469 additions
and
18 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| MENDABLE_SERVER_API_KEY= |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| .env |
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import React, { useRef, useLayoutEffect } from 'react'; | ||
| import { parseMarkdown } from '../../utils/marked'; | ||
|
|
||
| import Icon from '../Icon'; | ||
| import ResponseFeedback from './ResponseFeedback'; | ||
| // import ResponseSource from './ResponseSource'; | ||
|
|
||
| import styles from './styles.module.css'; | ||
|
|
||
| import { ConversationMessage } from './docChat'; | ||
|
|
||
| type ChatMessageProps = { | ||
| index: number; | ||
| type: ConversationMessage['type']; | ||
| content: ConversationMessage['content']; | ||
| sources?: ConversationMessage['sources']; | ||
| messageId?: number; | ||
| conversationId: number; | ||
| conversation: ConversationMessage[]; | ||
| setConversation: ( | ||
| conversation: (prevState: ConversationMessage[]) => ConversationMessage[], | ||
| ) => void; | ||
| }; | ||
|
|
||
| export default function ChatMessage({ | ||
| index, | ||
| messageId, | ||
| conversationId, | ||
| conversation, | ||
| setConversation, | ||
| type, | ||
| content, | ||
| sources, | ||
| }: ChatMessageProps) { | ||
| const responseContentRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| useLayoutEffect(() => { | ||
| if (responseContentRef.current) { | ||
| responseContentRef.current.innerHTML = parseMarkdown(content); | ||
| } | ||
| }, [content]); | ||
|
|
||
| return ( | ||
| <div className={styles.chatMessageContainer}> | ||
| <div className={styles.chatMessage}> | ||
| {type === 'prompt' && content !== '' && ( | ||
| <> | ||
| <div className={styles.chatMessageIcon}> | ||
| <Icon name="avatar" width="24" height="24" /> | ||
| </div> | ||
| <div>{content}</div> | ||
| </> | ||
| )} | ||
|
|
||
| {type === 'response' && content !== '' && ( | ||
| <> | ||
| <div className={styles.chatMessageIcon}> | ||
| <Icon name="base-logo" width="24" height="24" /> | ||
| </div> | ||
| <div ref={responseContentRef} className={styles.chatMessageContent} /> | ||
| </> | ||
| )} | ||
| </div> | ||
|
|
||
| {sources && sources.length > 0 && ( | ||
| <> | ||
| <ResponseFeedback | ||
| responseIndex={index} | ||
| messageId={messageId} | ||
| conversationId={conversationId} | ||
| conversation={conversation} | ||
| setConversation={setConversation} | ||
| /> | ||
|
|
||
| {/* Source data provided by the Mendable API needs more tuning but will be supported in a future release */} | ||
| {/* <div className={styles.chatMessageSourcesLabel}>Verified Sources:</div> | ||
| <div className={styles.chatMessageSourcesContainer}> | ||
| {sources.map((source, i) => ( | ||
| <ResponseSource | ||
| key={source} | ||
| index={i} | ||
| conversationId={conversationId} | ||
| messageId={messageId} | ||
| source={source} | ||
| /> | ||
| ))} | ||
| </div> */} | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.