feat: format the responses (#15)

<img width="1054" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/b1ecf15d-1262-4cb3-be8e-cc39d9d01773">

app/globals.css

@@ -110,3 +110,55 @@
     pointer-events: none;
   }
 }
+
+/* Light theme. */
+:root {
+  --color-canvas-default: #ffffff;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsla(210, 18%, 87%, 1);
+}
+
+/* Dark theme. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-canvas-default: #0d1117;
+    --color-canvas-subtle: #161b22;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+  }
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  margin-top: 0;
+  margin-bottom: 16px;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+tr {
+  background-color: var(--color-canvas-default);
+  border-top: 1px solid var(--color-border-muted);
+}
+
+tr:nth-child(2n) {
+  background-color: var(--color-canvas-subtle);
+}
+
+td,
+th {
+  padding: 6px 13px;
+  border: 1px solid var(--color-border-default);
+}
+
+th {
+  font-weight: 600;
+}
+
+table img {
+  background-color: transparent;
+}

components/chat/ChatMessage.tsx

@@ -15,7 +15,68 @@ export interface ChatMessageProps {
   message: MessageBase;
 }
 
+
+const PAIRS: Record<string, string> = {
+  '┍': '┑',
+  '┝': '┥',
+  '├': '┤',
+  '┕': '┙',
+};
+
+const MIDDLE_STARTER = '┝';
+const MIDDLE_SEPARATOR = '┿';
+
 export function ChatMessage({ message, ...props }: ChatMessageProps) {
+  const cleanupMessage = ({ content, role }: MessageBase) => {
+    if (role === 'user') {
+      return {
+        content,
+      };
+    }
+    const [logs = '', answer = ''] = content.split('<ANSWER>');
+    const cleanedLogs = [];
+    let left = 0;
+    let right = 0;
+    while (right < logs.length) {
+      if (Object.keys(PAIRS).includes(content[right])) {
+        cleanedLogs.push(content.substring(left, right));
+        left = right++;
+        while (
+          right < content.length &&
+          PAIRS[content[left]] !== content[right]
+        ) {
+          right++;
+        }
+        if (content[left] === MIDDLE_STARTER) {
+          // add the text alignment so it can be shown as a table
+          const separators = logs
+            .substring(left, right)
+            .split(MIDDLE_SEPARATOR).length;
+          if (separators > 0) {
+            cleanedLogs.push(
+              Array(separators + 1)
+                .fill('|')
+                .join(' :- '),
+            );
+          }
+        }
+        left = ++right;
+      } else {
+        right++;
+      }
+    }
+    cleanedLogs.push(content.substring(left, right));
+    return {
+      logs: cleanedLogs
+        .join('')
+        .replace(/│/g, '|')
+        .split('|\n\n|')
+        .join('|\n|'),
+      content: answer.replace('</</ANSWER>', '').replace('</ANSWER>', ''),
+    };
+  };
+
+  const { logs, content } = cleanupMessage(message);
   return (
     <div className={cn('group relative mb-4 flex items-start')} {...props}>
       <div
@@ -29,12 +90,39 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
         {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
       </div>
       <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
+        {logs && message.role !== 'user' && (
+          <div className="bg-slate-100 mb-4 p-4 max-h-60 overflow-auto">
+            <div className="text-xl font-bold">Thinking Process</div>
+            <MemoizedReactMarkdown
+              className="break-words text-sm"
+              remarkPlugins={[remarkGfm, remarkMath]}
+              components={{
+                p({ children }) {
+                  return (
+                    <p className="my-2 last:mb-0 whitespace-pre-line">
+                      {children}
+                    </p>
+                  );
+                },
+                code({ children, ...props }) {
+                  return (
+                    <code className="whitespace-pre-line">{children}</code>
+                  );
+                },
+              }}
+            >
+              {logs}
+            </MemoizedReactMarkdown>
+          </div>
+        )}
         <MemoizedReactMarkdown
           className="break-words"
           remarkPlugins={[remarkGfm, remarkMath]}
           components={{
             p({ children }) {
-              return <p className="mb-2 last:mb-0">{children}</p>;
+              return (
+                <p className="my-2 last:mb-0 whitespace-pre-line">{children}</p>
+              );
             },
             code({ node, inline, className, children, ...props }) {
               if (children.length) {
@@ -48,7 +136,6 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
               }
 
               const match = /language-(\w+)/.exec(className || '');
-
               if (inline) {
                 return (
                   <code className={className} {...props}>
@@ -68,7 +155,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
             },
           }}
         >
-          {message.content}
+          {content}
         </MemoizedReactMarkdown>
         <ChatMessageActions message={message} />
       </div>