-
-
- }
- />
-
- {t('conversation.answer')}
-
-
-
-
-
-
- {language}
-
-
-
-
- {String(children).replace(/\n$/, '')}
-
-
- ) : (
-
- {children}
-
- );
- },
- ul({ children }) {
- return (
-
- );
- },
- ol({ children }) {
- return (
-
- {children}
-
- );
- },
- table({ children }) {
- return (
-
- );
- },
- thead({ children }) {
- return (
-
- {children}
-
- );
- },
- tr({ children }) {
- return (
-
- {children}
-
- );
- },
- th({ children }) {
- return
{children} | ;
- },
- td({ children }) {
- return
{children} | ;
- },
- }}
+ {thought && (
+
+ )}
+ {message && (
+
+
+
+ }
+ />
+
+ {t('conversation.answer')}
+
+
+
- {preprocessLaTeX(message)}
-
-
-
-
-
-
- {type === 'ERROR' && (
-
- )}
- {handleFeedback && (
- <>
-
+
+
+ {language}
+
+
+
+
+ {String(children).replace(/\n$/, '')}
+
+
+ ) : (
+
+ {children}
+
+ );
+ },
+ ul({ children }) {
+ return (
+
+ );
+ },
+ ol({ children }) {
+ return (
+
+ {children}
+
+ );
+ },
+ table({ children }) {
+ return (
+
+ );
+ },
+ thead({ children }) {
+ return (
+
+ {children}
+
+ );
+ },
+ tr({ children }) {
+ return (
+
+ {children}
+
+ );
+ },
+ th({ children }) {
+ return
{children} | ;
+ },
+ td({ children }) {
+ return
{children} | ;
+ },
+ }}
>
-
+ )}
+ {message && (
+
+
+
+ {type === 'ERROR' && (
+
+ )}
+ {handleFeedback && (
+ <>
+
+
+
+ {
- if (feedback === undefined || feedback === null) {
- handleFeedback?.('LIKE');
- setIsLikeClicked(true);
- setIsDislikeClicked(false);
- } else if (feedback === 'LIKE') {
- handleFeedback?.(null);
- setIsLikeClicked(false);
- setIsDislikeClicked(false);
- }
- }}
- onMouseEnter={() => setIsLikeHovered(true)}
- onMouseLeave={() => setIsLikeHovered(false)}
- >
+ onClick={() => {
+ if (feedback === undefined || feedback === null) {
+ handleFeedback?.('LIKE');
+ setIsLikeClicked(true);
+ setIsDislikeClicked(false);
+ } else if (feedback === 'LIKE') {
+ handleFeedback?.(null);
+ setIsLikeClicked(false);
+ setIsDislikeClicked(false);
+ }
+ }}
+ onMouseEnter={() => setIsLikeHovered(true)}
+ onMouseLeave={() => setIsLikeHovered(false)}
+ >
+
-
-
-
-
-
+
+
{
- if (feedback === undefined || feedback === null) {
- handleFeedback?.('DISLIKE');
- setIsDislikeClicked(true);
- setIsLikeClicked(false);
- } else if (feedback === 'DISLIKE') {
- handleFeedback?.(null);
- setIsLikeClicked(false);
- setIsDislikeClicked(false);
- }
- }}
- onMouseEnter={() => setIsDislikeHovered(true)}
- onMouseLeave={() => setIsDislikeHovered(false)}
- >
+ >
+ {
+ if (feedback === undefined || feedback === null) {
+ handleFeedback?.('DISLIKE');
+ setIsDislikeClicked(true);
+ setIsLikeClicked(false);
+ } else if (feedback === 'DISLIKE') {
+ handleFeedback?.(null);
+ setIsLikeClicked(false);
+ setIsDislikeClicked(false);
+ }
+ }}
+ onMouseEnter={() => setIsDislikeHovered(true)}
+ onMouseLeave={() => setIsDislikeHovered(false)}
+ >
+
-
- >
- )}
-
+ >
+ )}
+
+ )}
{sources && (
);
}
+
+function Thought({
+ thought,
+ preprocessLaTeX,
+}: {
+ thought: string;
+ preprocessLaTeX: (content: string) => string;
+}) {
+ const [isDarkTheme] = useDarkTheme();
+ const [isThoughtOpen, setIsThoughtOpen] = useState(true);
+
+ return (
+
+
+
+ }
+ />
+
+
+ {isThoughtOpen && (
+
+
+
+
+
+ {language}
+
+
+
+
+ {String(children).replace(/\n$/, '')}
+
+
+ ) : (
+
+ {children}
+
+ );
+ },
+ ul({ children }) {
+ return (
+
+ );
+ },
+ ol({ children }) {
+ return (
+
+ {children}
+
+ );
+ },
+ table({ children }) {
+ return (
+
+ );
+ },
+ thead({ children }) {
+ return (
+
+ {children}
+
+ );
+ },
+ tr({ children }) {
+ return (
+
+ {children}
+
+ );
+ },
+ th({ children }) {
+ return
{children} | ;
+ },
+ td({ children }) {
+ return
{children} | ;
+ },
+ }}
+ >
+ {preprocessLaTeX(thought ?? '')}
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 601b9cf1..a578538f 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -1,11 +1,12 @@
import { Fragment, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import ConversationBubble from './ConversationBubble';
-import Hero from '../Hero';
-import { FEEDBACK, Query, Status } from './conversationModels';
+
import ArrowDown from '../assets/arrow-down.svg';
import RetryIcon from '../components/RetryIcon';
+import Hero from '../Hero';
import { useDarkTheme } from '../hooks';
+import ConversationBubble from './ConversationBubble';
+import { FEEDBACK, Query, Status } from './conversationModels';
interface ConversationMessagesProps {
handleQuestion: (params: {
@@ -83,13 +84,14 @@ export default function ConversationMessages({
const prepResponseView = (query: Query, index: number) => {
let responseView;
- if (query.response) {
+ if (query.thought || query.response) {
responseView = (