feat: UI Improvements (#72)

1. Tooltip -> Dialog
2. Show `print` and hide `print` / `output` if empty
3. Put `mediaUrl` in Message as `sendExtraMessageFields`
4. Change started status icon to glowing dot
<img width="680" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/a7a84d0a-2b4b-4e2a-b3cf-f7b6cb1b8221">

app/globals.css

@@ -87,3 +87,24 @@ h1 {
   background-size: cover;
   background: linear-gradient(to bottom, rgb(9, 9, 11), rgb(32, 32, 39));
 }
+
+.text-webkit-center {
+  text-align: -webkit-center;
+}
+
+.svg-shadow {
+  border-radius: 100%;
+  animation: svg-shadow 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes svg-shadow {
+  from {
+    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px transparent)
+      drop-shadow(0 0 10px transparent);
+  }
+
+  to {
+    filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 10px transparent)
+      drop-shadow(0 0 20px transparent);
+  }
+}

components/chat/ChatMessage.tsx

@@ -1,17 +1,8 @@
-// Inspired by Chatbot-UI and modified to fit the needs of this project
-// @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
-
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
-import rehypeRaw from 'rehype-raw';
-
 import { useMemo, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { CodeBlock } from '@/components/ui/CodeBlock';
-import { MemoizedReactMarkdown } from '@/components/chat/MemoizedReactMarkdown';
 import {
   IconCheckCircle,
-  IconChevronDoubleRight,
   IconCodeWrap,
   IconCrossCircle,
   IconLandingAI,
@@ -20,9 +11,9 @@ import {
   IconUser,
   IconOutput,
   IconLog,
+  IconGlowingDot,
 } from '@/components/ui/Icons';
 import { MessageUI } from '@/lib/types';
-import Img from '../ui/Img';
 import { ChunkBody, CodeResult, formatStreamLogs } from '@/lib/utils/content';
 import {
   Table,
@@ -41,107 +32,19 @@ import {
 } from '@/components/ui/Tooltip';
 
 import { Dialog, DialogContent, DialogTrigger } from '../ui/Dialog';
+import { Markdown } from './MemoizedReactMarkdown';
+import Img from '../ui/Img';
 
 export interface ChatMessageProps {
   message: MessageUI;
   isLoading: boolean;
 }
 
-const Markdown: React.FC<{
-  content: string;
-  setDetails?: (val: string) => void;
-}> = ({ content, setDetails }) => {
-  return (
-    <>
-      <MemoizedReactMarkdown
-        className="break-words overflow-auto"
-        remarkPlugins={[remarkGfm, remarkMath]}
-        rehypePlugins={[rehypeRaw] as any}
-        components={{
-          table({ children, ...props }) {
-            return <Table {...props}>{children}</Table>;
-          },
-          thead({ children, ...props }) {
-            return <TableHeader {...props}>{children}</TableHeader>;
-          },
-          th({ children, ...props }) {
-            return <TableHead {...props}>{children}</TableHead>;
-          },
-          tr({ children, ...props }) {
-            return <TableRow {...props}>{children}</TableRow>;
-          },
-          td({ children, ...props }) {
-            return <TableCell {...props}>{children}</TableCell>;
-          },
-          button({ children, ...props }) {
-            if ('data-details' in props && setDetails) {
-              return (
-                <Button
-                  {...props}
-                  onClick={() =>
-                    setDetails(decodeURI(props['data-details'] as string))
-                  }
-                >
-                  {children}
-                </Button>
-              );
-            }
-            return <Button {...props}>{children}</Button>;
-          },
-          p({ children, ...props }) {
-            if (
-              props.node.children.some(
-                child => child.type === 'element' && child.tagName === 'img',
-              )
-            ) {
-              return (
-                <p className="flex flex-wrap gap-2 items-start">{children}</p>
-              );
-            }
-            return <p className="mb-2 whitespace-pre-line">{children}</p>;
-          },
-          img(props) {
-            if (props.src?.endsWith('.mp4')) {
-              return (
-                <video src={props.src} controls width={500} height={500} />
-              );
-            }
-            return (
-              <Img
-                src={props.src ?? '/landing.png'}
-                alt={props.alt ?? 'answer-image'}
-                quality={100}
-                sizes="(min-width: 66em) 15vw,
-                        (min-width: 44em) 20vw,
-                        100vw"
-              />
-            );
-          },
-          code({ node, inline, className, children, ...props }) {
-            const match = /language-(\w+)/.exec(className || '');
-
-            return (
-              <CodeBlock
-                key={Math.random()}
-                language={(match && match[1]) || ''}
-                value={String(children).replace(/\n$/, '')}
-                {...props}
-              />
-            );
-          },
-        }}
-      >
-        {content}
-      </MemoizedReactMarkdown>
-    </>
-  );
-};
-
 export function ChatMessage({ message, isLoading }: ChatMessageProps) {
-  const { role, content } = message;
+  const { role, content, mediaUrl } = message;
 
   return role === 'user' ? (
-    <UserChatMessage content={content} />
+    <UserChatMessage content={content} mediaUrl={mediaUrl} />
   ) : (
     <AssistantChatMessage content={content} />
   );
@@ -149,23 +52,40 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
 
 const UserChatMessage: React.FC<{
   content: string;
-}> = ({ content }) => {
+  mediaUrl?: string;
+}> = ({ content, mediaUrl }) => {
   return (
-    <div className="group relative mb-6 flex rounded-md bg-muted p-4 ml-auto mr-0 w-3/5">
+    <div className="group relative mb-6 flex rounded-md bg-muted p-6 ml-auto mr-0 w-3/5">
       <div className="flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow bg-background">
         <IconUser />
       </div>
-      <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
-        {content && <Markdown content={content} />}
+      <div className="flex-1 px-1 ml-4 space-y-3 overflow-hidden">
+        <p>{content}</p>
+        {mediaUrl && (
+          <>
+            {mediaUrl?.endsWith('.mp4') ? (
+              <video src={mediaUrl} controls width={500} height={500} />
+            ) : (
+              <Img
+                src={mediaUrl}
+                alt={mediaUrl}
+                quality={100}
+                sizes="(min-width: 66em) 15vw,
+                        (min-width: 44em) 20vw,
+                        100vw"
+              />
+            )}
+          </>
+        )}
       </div>
     </div>
   );
 };
 
 const ChunkStatusToIconDict: Record<ChunkBody['status'], React.ReactElement> = {
-  started: <IconChevronDoubleRight className="text-cyan-500" />,
+  started: <IconGlowingDot className="bg-yellow-500/80" />,
   completed: <IconCheckCircle className="text-green-500" />,
-  running: <IconTerminalWindow className="text-teal-500" />,
+  running: <IconGlowingDot className="bg-teal-500/80" />,
   failed: <IconCrossCircle className="text-red-500" />,
 };
 const ChunkTypeToTextDict: Record<ChunkBody['type'], string> = {
@@ -177,6 +97,7 @@ const ChunkTypeToTextDict: Record<ChunkBody['type'], string> = {
 const ChunkPayloadAction: React.FC<{
   payload: ChunkBody['payload'];
 }> = ({ payload }) => {
+  if (!payload) return null;
   if (Array.isArray(payload)) {
     // [{title: 123, content, 345}, {title: ..., content: ...}] => ['title', 'content']
     const keyArray = Array.from(
@@ -208,8 +129,8 @@ const ChunkPayloadAction: React.FC<{
                   {keyArray.map(header =>
                     header === 'documentation' ? (
                       <TableCell key={header}>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
+                        <Dialog>
+                          <DialogTrigger asChild>
                             <Button
                               variant="ghost"
                               size="icon"
@@ -217,11 +138,11 @@ const ChunkPayloadAction: React.FC<{
                             >
                               <IconTerminalWindow className="text-teal-500 size-4" />
                             </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
+                          </DialogTrigger>
+                          <DialogContent className="max-w-5xl">
                             <CodeBlock language="md" value={line[header]} />
-                          </TooltipContent>
-                        </Tooltip>
+                          </DialogContent>
+                        </Dialog>
                       </TableCell>
                     ) : (
                       <TableCell key={header}>{line[header]}</TableCell>
@@ -274,45 +195,44 @@ const CodeResultDisplay: React.FC<{
     <div className="rounded-lg overflow-hidden relative max-w-5xl">
       <CodeBlock language="python" value={code} />
       <div className="rounded-lg relative">
-        <Separator />
         <div className="absolute left-1/2 -translate-x-1/2 -top-4 z-10">
-          <Tooltip>
-            <TooltipTrigger asChild>
+          <Dialog>
+            <DialogTrigger asChild>
               <Button variant="ghost" size="icon" className="size-8">
                 <IconTerminalWindow className="text-teal-500 size-4" />
               </Button>
-            </TooltipTrigger>
-            <TooltipContent>
+            </DialogTrigger>
+            <DialogContent className="max-w-5xl">
               <CodeBlock language="python" value={test} />
-            </TooltipContent>
-          </Tooltip>
-          {Array.isArray(stdout) && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" className="size-8">
-                  <IconOutput className="text-blue-500 size-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <CodeBlock language="vim" value={stdout.join('').trim()} />
-              </TooltipContent>
-            </Tooltip>
-          )}
+            </DialogContent>
+          </Dialog>
           {Array.isArray(stderr) && (
-            <Tooltip>
-              <TooltipTrigger asChild>
+            <Dialog>
+              <DialogTrigger asChild>
                 <Button variant="ghost" size="icon" className="size-8">
                   <IconLog className="text-gray-500 size-4" />
                 </Button>
-              </TooltipTrigger>
-              <TooltipContent>
+              </DialogTrigger>
+              <DialogContent className="max-w-5xl">
                 <CodeBlock language="vim" value={stderr.join('').trim()} />
-              </TooltipContent>
-            </Tooltip>
+              </DialogContent>
+            </Dialog>
           )}
         </div>
       </div>
-      <CodeBlock language="output" value={results} />
+      {Array.isArray(stdout) && !!stdout.join('').trim() && (
+        <>
+          <Separator />
+          <CodeBlock language="print" value={stdout.join('').trim()} />
+        </>
+      )}
+      {!!results.length && (
+        <>
+          <Separator />
+          <CodeBlock language="output" value={results} />
+        </>
+      )}
+      <Separator />
     </div>
   );
 };
@@ -326,7 +246,7 @@ const AssistantChatMessage: React.FC<{
   );
 
   return (
-    <div className="group relative mb-6 flex rounded-md bg-muted p-4 w-full">
+    <div className="group relative mb-6 flex rounded-md bg-muted p-6 w-full">
       <div className="flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow bg-primary text-primary-foreground">
         <IconLandingAI />
       </div>
@@ -334,8 +254,13 @@ const AssistantChatMessage: React.FC<{
         <Table className="w-[400px]">
           <TableBody>
             {formattedSections.map(section => (
-              <TableRow className="border-primary/50" key={section.type}>
-                <TableCell>{ChunkStatusToIconDict[section.status]}</TableCell>
+              <TableRow
+                className="border-primary/50 h-[56px]"
+                key={section.type}
+              >
+                <TableCell className="text-center text-webkit-center">
+                  {ChunkStatusToIconDict[section.status]}
+                </TableCell>
                 <TableCell className="font-medium">
                   {ChunkTypeToTextDict[section.type]}
                 </TableCell>

components/chat/MemoizedReactMarkdown.tsx

@@ -1,5 +1,11 @@
 import { FC, memo } from 'react';
 import ReactMarkdown, { Options } from 'react-markdown';
+import Img from '../ui/Img';
+
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeRaw from 'rehype-raw';
+import { CodeBlock } from '../ui/CodeBlock';
 
 export const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
@@ -7,3 +13,62 @@ export const MemoizedReactMarkdown: FC<Options> = memo(
     prevProps.children === nextProps.children &&
     prevProps.className === nextProps.className,
 );
+
+export const Markdown: React.FC<{
+  content: string;
+}> = ({ content }) => {
+  return (
+    <>
+      <MemoizedReactMarkdown
+        className="break-words overflow-auto"
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeRaw] as any}
+        components={{
+          p({ children, ...props }) {
+            if (
+              props.node.children.some(
+                child => child.type === 'element' && child.tagName === 'img',
+              )
+            ) {
+              return (
+                <p className="flex flex-wrap gap-2 items-start">{children}</p>
+              );
+            }
+            return <p className="mb-2 whitespace-pre-line">{children}</p>;
+          },
+          img(props) {
+            if (props.src?.endsWith('.mp4')) {
+              return (
+                <video src={props.src} controls width={500} height={500} />
+              );
+            }
+            return (
+              <Img
+                src={props.src ?? '/landing.png'}
+                alt={props.alt ?? 'answer-image'}
+                quality={100}
+                sizes="(min-width: 66em) 15vw,
+                        (min-width: 44em) 20vw,
+                        100vw"
+              />
+            );
+          },
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '');
+
+            return (
+              <CodeBlock
+                key={Math.random()}
+                language={(match && match[1]) || ''}
+                value={String(children).replace(/\n$/, '')}
+                {...props}
+              />
+            );
+          },
+        }}
+      >
+        {content}
+      </MemoizedReactMarkdown>
+    </>
+  );
+};

components/ui/Dialog.tsx

@@ -29,10 +29,10 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+const DialogContent: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+    React.RefAttributes<any>
+> = React.forwardRef(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content

components/ui/Icons.tsx

@@ -740,8 +740,8 @@ function IconLog({ className, ...props }: React.ComponentProps<'svg'>) {
       {...props}
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M3 2.5C3 2.22386 3.22386 2 3.5 2H9.08579C9.21839 2 9.34557 2.05268 9.43934 2.14645L11.8536 4.56066C11.9473 4.65443 12 4.78161 12 4.91421V12.5C12 12.7761 11.7761 13 11.5 13H3.5C3.22386 13 3 12.7761 3 12.5V2.5ZM3.5 1C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V4.91421C13 4.51639 12.842 4.13486 12.5607 3.85355L10.1464 1.43934C9.86514 1.15804 9.48361 1 9.08579 1H3.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5H7.5C7.77614 5 8 4.77614 8 4.5C8 4.22386 7.77614 4 7.5 4H4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H4.5Z"
         fill="currentColor"
       />
@@ -760,8 +760,8 @@ function IconOutput({ className, ...props }: React.ComponentProps<'svg'>) {
       {...props}
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z"
         fill="currentColor"
       />
@@ -769,6 +769,10 @@ function IconOutput({ className, ...props }: React.ComponentProps<'svg'>) {
   );
 }
 
+function IconGlowingDot({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('size-3 svg-shadow', className)} {...props} />;
+}
+
 export {
   IconEdit,
   IconLandingAI,
@@ -811,4 +815,5 @@ export {
   IconListUnordered,
   IconLog,
   IconOutput,
+  IconGlowingDot,
 };

components/ui/Table.tsx

@@ -90,7 +90,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    className={cn(
+      'py-2 px-4 align-middle [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
     {...props}
   />
 ));

lib/hooks/useVisionAgent.ts

@@ -1,7 +1,7 @@
 import { useChat } from 'ai/react';
 import { toast } from 'react-hot-toast';
 import { useEffect, useRef, useState } from 'react';
-import { ChatWithMessages, MessageUserInput } from '../types';
+import { ChatWithMessages, MessageUI, MessageUserInput } from '../types';
 import {
   dbPostCreateMessage,
   dbPostUpdateMessageResponse,
@@ -61,13 +61,15 @@ const useVisionAgent = (chat: ChatWithMessages) => {
   }, [isLoading, messages, reload]);
 
   return {
-    messages,
+    messages: messages as MessageUI[],
     append: async (messageInput: MessageUserInput) => {
       currMediaUrl.current = messageInput.mediaUrl;
       append({
         id,
         role: 'user',
         content: messageInput.prompt,
+        // @ts-ignore valid when setting sendExtraMessageFields
+        mediaUrl: messageInput.mediaUrl,
       });
       const resp = await dbPostCreateMessage(id, messageInput);
       currMessageId.current = resp.id;

lib/types.ts

@@ -8,7 +8,9 @@ export type MessageAssistantResponse = Partial<
   Pick<Message, 'response' | 'result'>
 >;
 
-export type MessageUI = Pick<MessageAI, 'role' | 'content' | 'id'>;
+export type MessageUI = Pick<MessageAI, 'role' | 'content' | 'id'> & {
+  mediaUrl?: string;
+};
 
 export interface SignedPayload {
   id: string;

lib/utils/message.ts

@@ -2,16 +2,6 @@ import { Message } from '@prisma/client';
 import { MessageAssistantResponse, MessageUI } from '../types';
 import { ChunkBody } from './content';
 
-const INPUT_PREFIX = 'input';
-
-const generateInputImageMarkdown = (url: string) => {
-  if (url.toLowerCase().endsWith('.mp4')) {
-    return `![${INPUT_PREFIX}](<${url}>)`;
-  } else {
-    return `![${INPUT_PREFIX}](<${url}>)`;
-  }
-};
-
 /**
  * The Message we saved to database consists of a prompt and a response
  * for the UI to use, we need to break them to 2 messages, User and Assistant(if responded)
@@ -25,8 +15,8 @@ export const convertDBMessageToUIMessage = (
       acc.push({
         id: id + '-user',
         role: 'user',
-        // add mediaUrl to the prompt
-        content: prompt + '\n\n' + generateInputImageMarkdown(mediaUrl),
+        content: prompt,
+        mediaUrl,
       });
     }
     if (response) {

package.json

@@ -72,7 +72,7 @@
     "@types/react-window": "^1.8.8",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/parser": "^6.19.0",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",

pnpm-lock.yaml

@@ -178,7 +178,7 @@ importers:
         specifier: ^6.19.0
         version: 6.21.0(eslint@8.57.0)(typescript@5.4.5)
       autoprefixer:
-        specifier: ^10.4.17
+        specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.38)
       eslint:
         specifier: ^8.56.0
@@ -1897,8 +1897,8 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  electron-to-chromium@1.4.744:
-    resolution: {integrity: sha512-nAGcF0yeKKfrP13LMFr5U1eghfFSvFLg302VUFzWlcjPOnUYd52yU5x6PBYrujhNbc4jYmZFrGZFK+xasaEzVA==}
+  electron-to-chromium@1.4.789:
+    resolution: {integrity: sha512-0VbyiaXoT++Fi2vHGo2ThOeS6X3vgRCWrjPeO2FeIAWL6ItiSJ9BqlH8LfCXe3X1IdcG+S0iLoNaxQWhfZoGzQ==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3063,6 +3063,9 @@ packages:
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
+  picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -3738,8 +3741,8 @@ packages:
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
-  update-browserslist-db@1.0.13:
-    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+  update-browserslist-db@1.0.16:
+    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -5920,9 +5923,9 @@ snapshots:
   browserslist@4.23.0:
     dependencies:
       caniuse-lite: 1.0.30001611
-      electron-to-chromium: 1.4.744
+      electron-to-chromium: 1.4.789
       node-releases: 2.0.14
-      update-browserslist-db: 1.0.13(browserslist@4.23.0)
+      update-browserslist-db: 1.0.16(browserslist@4.23.0)
 
   buffer@6.0.3:
     dependencies:
@@ -6149,7 +6152,7 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  electron-to-chromium@1.4.744: {}
+  electron-to-chromium@1.4.789: {}
 
   emoji-regex@8.0.0: {}
 
@@ -7650,6 +7653,8 @@ snapshots:
 
   picocolors@1.0.0: {}
 
+  picocolors@1.0.1: {}
+
   picomatch@2.3.1: {}
 
   pify@2.3.0: {}
@@ -8460,11 +8465,11 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  update-browserslist-db@1.0.13(browserslist@4.23.0):
+  update-browserslist-db@1.0.16(browserslist@4.23.0):
     dependencies:
       browserslist: 4.23.0
       escalade: 3.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
 
   uri-js@4.4.1:
     dependencies: