feat: improved layout and made image clickable

nextjs-multi-modal-xmas/app/components/ui/chat/chat-message.tsx

@@ -21,25 +21,35 @@ function ChatMessageContents({
 
   return (
     <>
+      {textContent && role !== "user" && (
+        <Markdown content={textContent.text!} />
+      )}
       {mediaContents.length > 0 && (
         <div className="flex gap-4 flex-wrap">
           {mediaContents.map((content, index) => {
             const image_url = content.image_url?.url;
             return (
               <div key={index}>
-                <img
-                  src={image_url}
-                  className="rounded-md max-w-[200px] shadow-md"
-                  alt=""
-                />
+                {role !== "user" ? (
+                  <a href={image_url} target="_blank" rel="noopener noreferrer">
+                    <img
+                      src={image_url}
+                      className="rounded-md max-w-[400px] shadow-md"
+                      alt=""
+                    />
+                  </a>
+                ) : (
+                  <img
+                    src={image_url}
+                    className="rounded-md max-w-[400px] shadow-md"
+                    alt=""
+                  />
+                )}
               </div>
             );
           })}
         </div>
       )}
-      {textContent && role !== "user" && (
-        <Markdown content={textContent.text!} />
-      )}
     </>
   );
 }

nextjs-multi-modal-xmas/app/components/ui/chat/chat-messages.tsx

@@ -25,11 +25,6 @@ export default function ChatMessages(
     props.reload && !props.isLoading && isLastMessageFromAssistant;
   const showStop = props.stop && props.isLoading;
 
-  // `isPending` indicate
-  // that stream response is not yet received from the server,
-  // so we show a loading indicator to give a better UX.
-  const isPending = props.isLoading && !isLastMessageFromAssistant;
-
   useEffect(() => {
     scrollToBottom();
   }, [messageLength, lastMessage]);
@@ -37,13 +32,13 @@ export default function ChatMessages(
   return (
     <div className="w-full rounded-xl bg-white p-4 shadow-xl pb-0">
       <div
-        className="flex h-[50vh] flex-col gap-5 divide-y overflow-y-auto pb-4"
+        className="flex h-[75vh] flex-col gap-5 divide-y overflow-y-auto pb-4"
         ref={scrollableChatContainerRef}
       >
         {props.messages.map((m) => (
           <ChatMessage key={m.id} {...m} />
         ))}
-        {isPending && (
+        {props.isLoading && (
           <div className="flex justify-center items-center pt-10">
             <Loader2 className="h-4 w-4 animate-spin" />
           </div>

nextjs-multi-modal-xmas/app/page.tsx

@@ -3,7 +3,7 @@ import ChatSection from "./components/chat-section";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center gap-10 p-24 background-gradient">
+    <main className="flex min-h-screen flex-col items-center gap-5 p-4 background-gradient">
       <Header />
       <ChatSection />
     </main>