From c73bca8d5cbe4a1fb8704b697d6d6854d61a8c1b Mon Sep 17 00:00:00 2001
From: H0llyW00dzZ <priv8@btz.pm>
Date: Sun, 25 Feb 2024 02:26:44 +0700
Subject: [PATCH] Improve [UI/UX] [Front End] [Chats] attach image

- [+] feat(chat.tsx): replace img tags with next/image for better performance and add layout property as responsive
---
 app/components/chat.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 6f78451a54c..53ef629b232 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -107,6 +107,8 @@ import { appWindow } from '@tauri-apps/api/window';
 import { sendDesktopNotification } from "../utils/taurinotification";
 import { clearUnfinishedInputForSession, debouncedSave } from "../utils/storageHelper";
 import { MultimodalContent } from "../client/api";
+import Image from 'next/image';
+
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -1725,10 +1727,11 @@ function _Chat() {
                       defaultShow={i >= messages.length - 6}
                     />
                     {getMessageImages(message).length == 1 && (
-                      <img
+                      <Image
                         className={styles["chat-message-item-image"]}
                         src={getMessageImages(message)[0]}
                         alt=""
+                        layout="responsive"
                       />
                     )}
                     {getMessageImages(message).length > 1 && (
@@ -1742,13 +1745,14 @@ function _Chat() {
                       >
                         {getMessageImages(message).map((image, index) => {
                           return (
-                            <img
+                            <Image
                               className={
                                 styles["chat-message-item-image-multi"]
                               }
                               key={index}
                               src={image}
                               alt=""
+                              layout="responsive"
                             />
                           );
                         })}