Skip to content

Commit 962bbf1

Browse files
kartikpersistentkartikpersistent
committed
fix: Fixed the details state handling between multiple chats
feature: Added the warning banner If selected llm model is not supported for raga's evaluation
1 parent 8c16d58 commit 962bbf1

File tree

7 files changed

+71
-45
lines changed

7 files changed

+71
-45
lines changed

‎frontend/src/components/ChatBot/ChatInfoModal.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
useCopyToClipboard,
99
Banner,
1010
useMediaQuery,
11+
Button,
1112
} from '@neo4j-ndl/react';
1213
import { DocumentDuplicateIconOutline, ClipboardDocumentCheckIconOutline } from '@neo4j-ndl/react/icons';
1314
import '../../styling/info.css';
@@ -28,7 +29,6 @@ import { Relationship } from '@neo4j-nvl/base';
2829
import { getChatMetrics } from '../../services/GetRagasMetric';
2930
import MetricsTab from './MetricsTab';
3031
import { Stack } from '@mui/material';
31-
import ButtonWithToolTip from '../UI/ButtonWithToolTip';
3232

3333
const ChatInfoModal: React.FC<chatInfoMessage> = ({
3434
sources,
@@ -237,9 +237,9 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
237237
{mode != chatModeLables.graph ? <Tabs.Tab tabId={3}>Sources used</Tabs.Tab> : <></>}
238238
{mode != chatModeLables.graph ? <Tabs.Tab tabId={5}>Chunks</Tabs.Tab> : <></>}
239239
{mode === chatModeLables.graph_vector ||
240-
mode === chatModeLables.graph ||
241-
mode === chatModeLables.graph_vector_fulltext ||
242-
mode === chatModeLables.entity_vector ? (
240+
mode === chatModeLables.graph ||
241+
mode === chatModeLables.graph_vector_fulltext ||
242+
mode === chatModeLables.entity_vector ? (
243243
<Tabs.Tab tabId={4}>Top Entities used</Tabs.Tab>
244244
) : (
245245
<></>
@@ -262,11 +262,15 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
262262
<Tabs.TabPanel tabId={8} value={activeTab}>
263263
<Stack spacing={2}>
264264
<Stack spacing={2}>
265+
{!supportedLLmsForRagas.includes(metricmodel) && (
266+
<Banner type='warning'>LLM Model Not Supported ,Please Choose Different Model</Banner>
267+
)}
265268
<Box>
266269
<Typography variant='body-large'>
267270
We use several key metrics to assess the quality of our chat responses. Click the button below to view
268271
detailed scores for this interaction. These scores help us continuously improve the accuracy and
269-
helpfulness of our chatbots.
272+
helpfulness of our chatbots.This usually takes about <span className='font-bold'>20</span> seconds.
273+
You'll see detailed scores shortly.
270274
</Typography>
271275
</Box>
272276
<Stack>
@@ -286,15 +290,14 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
286290
</Stack>
287291
{showMetricsTable && <MetricsTab metricsLoading={metricsLoading} metricDetails={metricDetails} />}
288292
{!metricDetails && (
289-
<ButtonWithToolTip
293+
<Button
290294
label='Metrics Action Button'
291-
text={!supportedLLmsForRagas.includes(metricmodel) ? 'please choose different model' : ''}
292295
disabled={metricsLoading || !supportedLLmsForRagas.includes(metricmodel)}
293296
className='w-max self-center mt-4'
294297
onClick={loadMetrics}
295298
>
296299
View Detailed Metrics
297-
</ButtonWithToolTip>
300+
</Button>
298301
)}
299302
</Stack>
300303
</Tabs.TabPanel>
@@ -307,7 +310,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
307310
/>
308311
</Tabs.TabPanel>
309312
<Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={5}>
310-
<ChunkInfo chunks={chunks} loading={infoLoading} mode={mode}/>
313+
<ChunkInfo chunks={chunks} loading={infoLoading} mode={mode} />
311314
</Tabs.TabPanel>
312315
<Tabs.TabPanel value={activeTab} tabId={6}>
313316
<CypherCodeBlock

‎frontend/src/components/ChatBot/Chatbot.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
8080
const [infoLoading, toggleInfoLoading] = useReducer((s) => !s, false);
8181
const [metricsLoading, toggleMetricsLoading] = useReducer((s) => !s, false);
8282
const downloadLinkRef = useRef<HTMLAnchorElement>(null);
83-
const [activeChat, setActiveChat] = useState<Messages>();
83+
const [activeChat, setActiveChat] = useState<Messages | null>(null);
8484

8585
const [_, copy] = useCopyToClipboard();
8686
const { speak, cancel, speaking } = useSpeechSynthesis({
@@ -232,13 +232,13 @@ const Chatbot: FC<ChatbotProps> = (props) => {
232232
total_tokens: response.info.total_tokens,
233233
response_time: response.info.response_time,
234234
cypher_query: response.info.cypher_query,
235-
graphonly_entities: response.info.context??[],
236-
entities: response.info.entities??[],
235+
graphonly_entities: response.info.context ?? [],
236+
entities: response.info.entities ?? [],
237237
nodeDetails: response.info.nodedetails,
238238
error: response.info.error,
239-
metric_question: response.info?.metric_details?.question??'',
240-
metric_answer: response.info?.metric_details?.answer??'',
241-
metric_contexts: response.info?.metric_details?.contexts??'',
239+
metric_question: response.info?.metric_details?.question ?? '',
240+
metric_answer: response.info?.metric_details?.answer ?? '',
241+
metric_contexts: response.info?.metric_details?.contexts ?? '',
242242
};
243243
if (index === 0) {
244244
simulateTypingEffect(chatbotMessageId, responseMode, mode, responseMode.message);
@@ -374,7 +374,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
374374
}
375375
};
376376

377-
const detailsHandler = useCallback((chat: Messages) => {
377+
const detailsHandler = useCallback((chat: Messages, previousActiveChat: Messages | null) => {
378378
const currentMode = chat.modes[chat.currentMode];
379379
setModelModal(currentMode.model ?? '');
380380
setSourcesModal(currentMode.sources ?? []);
@@ -391,6 +391,12 @@ const Chatbot: FC<ChatbotProps> = (props) => {
391391
setMetricContext(currentMode.metric_contexts ?? '');
392392
setMetricAnswer(currentMode.metric_answer ?? '');
393393
setActiveChat(chat);
394+
if (previousActiveChat != null && chat.id != previousActiveChat?.id) {
395+
setNodes([]);
396+
setChunks([]);
397+
setInfoEntities([]);
398+
setMetricDetails(null);
399+
}
394400
}, []);
395401

396402
const speechHandler = useCallback((chat: Messages) => {
@@ -487,6 +493,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
487493
detailsHandler={detailsHandler}
488494
listMessages={listMessages}
489495
speechHandler={speechHandler}
496+
activeChat={activeChat}
490497
></CommonActions>
491498
{messagechatModes.length > 1 && (
492499
<ChatModesSwitch
@@ -511,6 +518,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
511518
detailsHandler={detailsHandler}
512519
listMessages={listMessages}
513520
speechHandler={speechHandler}
521+
activeChat={activeChat}
514522
></CommonActions>
515523
</Flex>
516524
<Box>

‎frontend/src/components/ChatBot/ChunkInfo.tsx‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,19 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
2828
{chunk?.page_number ? (
2929
<>
3030
<div className='flex flex-row inline-block items-center'>
31-
<DocumentTextIconOutline className='w-4 h-4 inline-block mr-2' />
32-
<Typography
31+
<DocumentTextIconOutline className='w-4 h-4 inline-block mr-2' />
32+
<Typography
3333
variant='subheading-medium'
3434
className='text-ellipsis whitespace-nowrap max-w-[calc(100%-200px)] overflow-hidden'
3535
>
3636
{chunk?.fileName}
3737
</Typography>
3838
</div>
39-
{mode !== chatModeLables.global_vector && mode !== chatModeLables.entity_vector && mode !== chatModeLables.graph && (
40-
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
41-
)}
39+
{mode !== chatModeLables.global_vector &&
40+
mode !== chatModeLables.entity_vector &&
41+
mode !== chatModeLables.graph && (
42+
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
43+
)}
4244
</>
4345
) : chunk?.url && chunk?.start_time ? (
4446
<>
@@ -53,39 +55,47 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
5355
</Typography>
5456
</TextLink>
5557
</div>
56-
{mode !== chatModeLables.global_vector && mode !== chatModeLables.entity_vector && mode !== chatModeLables.graph && (
57-
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
58-
)}
58+
{mode !== chatModeLables.global_vector &&
59+
mode !== chatModeLables.entity_vector &&
60+
mode !== chatModeLables.graph && (
61+
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
62+
)}
5963
</>
6064
) : chunk?.url && new URL(chunk.url).host === 'wikipedia.org' ? (
6165
<>
6266
<div className='flex flex-row inline-block justiy-between items-center'>
6367
<img src={wikipedialogo} width={20} height={20} className='mr-2' />
6468
<Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
6569
</div>
66-
{mode !== chatModeLables.global_vector && mode !== chatModeLables.entity_vector && mode !== chatModeLables.graph && (
67-
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
68-
)}
70+
{mode !== chatModeLables.global_vector &&
71+
mode !== chatModeLables.entity_vector &&
72+
mode !== chatModeLables.graph && (
73+
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
74+
)}
6975
</>
7076
) : chunk?.url && new URL(chunk.url).host === 'storage.googleapis.com' ? (
7177
<>
7278
<div className='flex flex-row inline-block justiy-between items-center'>
7379
<img src={gcslogo} width={20} height={20} className='mr-2' />
7480
<Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
7581
</div>
76-
{mode !== chatModeLables.global_vector && mode !== chatModeLables.entity_vector && mode !== chatModeLables.graph && (
77-
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
78-
)}
82+
{mode !== chatModeLables.global_vector &&
83+
mode !== chatModeLables.entity_vector &&
84+
mode !== chatModeLables.graph && (
85+
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
86+
)}
7987
</>
8088
) : chunk?.url && chunk?.url.startsWith('s3://') ? (
8189
<>
8290
<div className='flex flex-row inline-block justiy-between items-center'>
8391
<img src={s3logo} width={20} height={20} className='mr-2' />
8492
<Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
8593
</div>
86-
{mode !== chatModeLables.global_vector && mode !== chatModeLables.entity_vector && mode !== chatModeLables.graph && (
87-
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
88-
)}
94+
{mode !== chatModeLables.global_vector &&
95+
mode !== chatModeLables.entity_vector &&
96+
mode !== chatModeLables.graph && (
97+
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
98+
)}
8999
</>
90100
) : chunk?.url &&
91101
!chunk?.url.startsWith('s3://') &&
@@ -97,9 +107,11 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
97107
<Typography variant='body-medium'>{chunk?.url}</Typography>
98108
</TextLink>
99109
</div>
100-
{mode !== chatModeLables.global_vector && mode !== chatModeLables.entity_vector && mode !== chatModeLables.graph && (
101-
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
102-
)}
110+
{mode !== chatModeLables.global_vector &&
111+
mode !== chatModeLables.entity_vector &&
112+
mode !== chatModeLables.graph && (
113+
<Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
114+
)}
103115
</>
104116
) : (
105117
<>

‎frontend/src/components/ChatBot/CommonChatActions.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ export default function CommonActions({
1010
speechHandler,
1111
copyHandler,
1212
listMessages,
13+
activeChat,
1314
}: {
1415
chat: Messages;
15-
detailsHandler: (chat: Messages) => void;
16+
activeChat: Messages | null;
17+
detailsHandler: (chat: Messages, activeChat: Messages | null) => void;
1618
speechHandler: (chat: Messages) => void;
1719
copyHandler: (message: string, id: number) => void;
1820
listMessages: Messages[];
@@ -27,7 +29,7 @@ export default function CommonActions({
2729
text='Retrieval Information'
2830
label='Retrieval Information'
2931
disabled={chat.isTyping || chat.isLoading}
30-
onClick={() => detailsHandler(chat)}
32+
onClick={() => detailsHandler(chat, activeChat)}
3133
>
3234
{buttonCaptions.details}
3335
</ButtonWithToolTip>

‎frontend/src/components/ChatBot/CommunitiesInfo.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,12 @@ const CommunitiesInfo: FC<CommunitiesProps> = ({ loading, communities, mode }) =
2121
<Typography variant='subheading-medium'>ID : </Typography>
2222
<Typography variant='subheading-medium'>{community.id}</Typography>
2323
</Flex>
24-
{mode === chatModeLables.global_vector && community.score && (<Flex flexDirection='row' gap='2'>
25-
<Typography variant='subheading-medium'>Score : </Typography>
26-
<Typography variant='subheading-medium'>{community.score}</Typography>
27-
</Flex>)}
24+
{mode === chatModeLables.global_vector && community.score && (
25+
<Flex flexDirection='row' gap='2'>
26+
<Typography variant='subheading-medium'>Score : </Typography>
27+
<Typography variant='subheading-medium'>{community.score}</Typography>
28+
</Flex>
29+
)}
2830
<ReactMarkdown>{community.summary}</ReactMarkdown>
2931
</div>
3032
</li>

‎frontend/src/components/Graph/GraphViewModal.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
7474
{}
7575
);
7676
};
77-
console.log('graphType', graphType);
7877
// Unmounting the component
7978
useEffect(() => {
8079
const timeoutId = setTimeout(() => {

‎frontend/src/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -700,7 +700,7 @@ export type SourcesProps = {
700700
export type ChunkProps = {
701701
loading: boolean;
702702
chunks: Chunk[];
703-
mode:string;
703+
mode: string;
704704
};
705705

706706
export type EntitiesProps = {
@@ -713,7 +713,7 @@ export type EntitiesProps = {
713713
export type CommunitiesProps = {
714714
loading: boolean;
715715
communities: Community[];
716-
mode:string;
716+
mode: string;
717717
};
718718

719719
export interface entity {

0 commit comments

Comments
 (0)