feat: add avatar (#47)

packages/bolt/app/components/chat/BaseChat.tsx

@@ -9,6 +9,7 @@ import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 
 import styles from './BaseChat.module.scss';
+import { useLoaderData } from '@remix-run/react';
 
 interface BaseChatProps {
   textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
@@ -58,6 +59,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+    const { avatar } = useLoaderData<{ avatar?: string }>();
 
     return (
       <div
@@ -94,6 +96,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"
                       messages={messages}
                       isStreaming={isStreaming}
+                      avatar={avatar}
                     />
                   ) : null;
                 }}

packages/bolt/app/components/chat/Messages.client.tsx

@@ -9,10 +9,11 @@ interface MessagesProps {
   className?: string;
   isStreaming?: boolean;
   messages?: Message[];
+  avatar?: string;
 }
 
 export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
-  const { id, isStreaming = false, messages = [] } = props;
+  const { id, isStreaming = false, messages = [], avatar } = props;
 
   return (
     <div id={id} ref={ref} className={props.className}>
@@ -34,12 +35,8 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                 })}
               >
                 {isUserMessage && (
-                  <div
-                    className={classNames(
-                      'flex items-center justify-center min-w-[34px] min-h-[34px] bg-white text-gray-600 rounded-full p-1 self-start',
-                    )}
-                  >
-                    <div className="i-ph:user-fill text-xl"></div>
+                  <div className="flex items-center justify-center min-w-[34px] min-h-[34px] bg-white text-gray-600 rounded-full p-1 self-start">
+                    {avatar ? <img className="w-6 h-6" src={avatar} /> : <div className="i-ph:user-fill text-xl"></div>}
                   </div>
                 )}
                 <div className="grid grid-col-1 w-full">