Skip to content

Commit

Permalink
Minor improvements to ChatMessage, display tool names
Browse files Browse the repository at this point in the history
  • Loading branch information
@KastanDay
KastanDay committed May 15, 2024
1 parent 243bb95 commit db9f530
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 45 deletions.
119 changes: 75 additions & 44 deletions src/components/Chat/ChatMessage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,10 +419,11 @@ export const ChatMessage: FC<Props> = memo(

return (
<div
className={`group md:px-4 ${message.role === 'assistant'
? 'border-b border-black/10 bg-gray-50/50 text-gray-800 dark:border-[rgba(42,42,120,0.50)] dark:bg-[#202134] dark:text-gray-100'
: 'border-b border-black/10 bg-white/50 text-gray-800 dark:border-[rgba(42,42,120,0.50)] dark:bg-[#15162B] dark:text-gray-100'
}`}
className={`group md:px-4 ${
message.role === 'assistant'
? 'border-b border-black/10 bg-gray-50/50 text-gray-800 dark:border-[rgba(42,42,120,0.50)] dark:bg-[#202134] dark:text-gray-100'
: 'border-b border-black/10 bg-white/50 text-gray-800 dark:border-[rgba(42,42,120,0.50)] dark:bg-[#15162B] dark:text-gray-100'
}`}
style={{ overflowWrap: 'anywhere' }}
>
<div className="relative m-auto flex p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-5xl lg:px-0 xl:max-w-3xl">
Expand Down Expand Up @@ -557,10 +558,10 @@ export const ChatMessage: FC<Props> = memo(
{isImg2TextLoading &&
(messageIndex ===
(selectedConversation?.messages.length ?? 0) -
1 ||
1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{
display: 'flex',
Expand All @@ -584,10 +585,10 @@ export const ChatMessage: FC<Props> = memo(
{isImg2TextLoading === false &&
(messageIndex ===
(selectedConversation?.messages.length ?? 0) -
1 ||
1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{
display: 'flex',
Expand All @@ -612,10 +613,10 @@ export const ChatMessage: FC<Props> = memo(
{isRetrievalLoading &&
(messageIndex ===
(selectedConversation?.messages.length ?? 0) -
1 ||
1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{
display: 'flex',
Expand All @@ -639,10 +640,10 @@ export const ChatMessage: FC<Props> = memo(
{isRetrievalLoading === false &&
(messageIndex ===
(selectedConversation?.messages.length ?? 0) -
1 ||
1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{
display: 'flex',
Expand All @@ -667,10 +668,10 @@ export const ChatMessage: FC<Props> = memo(
{isRouting &&
(messageIndex ===
(selectedConversation?.messages.length ?? 0) -
1 ||
1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{
display: 'flex',
Expand All @@ -695,10 +696,10 @@ export const ChatMessage: FC<Props> = memo(
routingResponse &&
(messageIndex ===
(selectedConversation?.messages.length ?? 0) -
1 ||
1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{
display: 'flex',
Expand Down Expand Up @@ -732,7 +733,11 @@ export const ChatMessage: FC<Props> = memo(
Arguments:{' '}
<pre>
{/* @ts-ignore -- idk */}
{JSON.stringify(routingResponse[0].arguments, null, 2,)}
{JSON.stringify(
routingResponse[0].arguments,
null,
2,
)}
</pre>
</Accordion.Panel>
</Accordion.Item>
Expand All @@ -743,10 +748,10 @@ export const ChatMessage: FC<Props> = memo(
{isRunningTool &&
(messageIndex ===
(selectedConversation?.messages.length ?? 0) -
1 ||
1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{
display: 'flex',
Expand All @@ -761,7 +766,13 @@ export const ChatMessage: FC<Props> = memo(
}}
className={`pulsate ${montserrat_paragraph.variable} font-montserratParagraph`}
>
Running tool...
Running
<Badge color="grape" radius="md">
{routingResponse
? routingResponse[0]?.toolName
: ''}
</Badge>
...
</p>
<LoadingSpinner size="xs" />
</div>
Expand All @@ -770,10 +781,10 @@ export const ChatMessage: FC<Props> = memo(
{isRunningTool === false &&
(messageIndex ===
(selectedConversation?.messages.length ?? 0) -
1 ||
1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<>
{/* <IconCheck size={25} /> */}
<div
Expand Down Expand Up @@ -818,11 +829,30 @@ export const ChatMessage: FC<Props> = memo(
wordWrap: 'break-word',
}}
>
{JSON.parse(
tool.toolResult as string,
)
.data.replace(/\\r\\n/g, '\n')
.replace(/\\t/g, '\t')}
{(() => {
try {
const parsedResult = JSON.parse(
tool.toolResult as string,
)
if (
parsedResult &&
parsedResult.data &&
typeof parsedResult.data ===
'string'
) {
return parsedResult.data
.replace(/\\r\\n/g, '\n')
.replace(/\\t/g, '\t')
}
return tool.toolResult // Return the original result if data is not in the expected format
} catch (error) {
console.error(
'Failed to parse tool result:',
error,
)
return tool.toolResult // Return the original text 'as-is' if parsing fails
}
})()}
</pre>
</Accordion.Panel>
</Accordion.Item>
Expand All @@ -840,8 +870,8 @@ export const ChatMessage: FC<Props> = memo(
(messageIndex ===
(selectedConversation?.messages.length ?? 0) - 1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{ display: 'flex', alignItems: 'center' }}
>
Expand All @@ -862,8 +892,8 @@ export const ChatMessage: FC<Props> = memo(
(messageIndex ===
(selectedConversation?.messages.length ?? 0) - 1 ||
messageIndex ===
(selectedConversation?.messages.length ?? 0) -
2) && (
(selectedConversation?.messages.length ?? 0) -
2) && (
<div
style={{ display: 'flex', alignItems: 'center' }}
>
Expand Down Expand Up @@ -999,12 +1029,13 @@ export const ChatMessage: FC<Props> = memo(
},
}}
>
{`${message.content}${messageIsStreaming &&
{`${message.content}${
messageIsStreaming &&
messageIndex ==
(selectedConversation?.messages.length ?? 0) - 1
? '`▍`'
: ''
}`}
(selectedConversation?.messages.length ?? 0) - 1
? '`▍`'
: ''
}`}
</MemoizedReactMarkdown>
{/* {message.contexts && message.contexts.length > 0 && (
<Group variant="row" spacing="xs">
Expand Down
2 changes: 1 addition & 1 deletion src/components/UIUC-Components/N8nWorkflowsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { DataTable, DataTableSortStatus } from 'mantine-datatable'
import { LoadingSpinner } from './LoadingSpinner'
import { useMutation, useQueryClient } from '@tanstack/react-query'

const PAGE_SIZE = 2
const PAGE_SIZE = 20

interface N8nWorkflowsTableProps {
n8nApiKey: string
Expand Down
1 change: 1 addition & 0 deletions src/pages/api/chat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export const buildPrompt = async ({
Priorities for building prompt w/ limited window:
1. ✅ most recent user message
2. Last 1 or 2 convo history. At least the user message and the AI response. Key for follow-up questions.
2. ✅ image description
3. ✅ tool result
4. query_topContext
Expand Down

0 comments on commit db9f530

Please sign in to comment.