From 64e893bc09bcfa5b62bad46fa241a488cbd8dcf1 Mon Sep 17 00:00:00 2001
From: xcatliu <xcatliu@gmail.com>
Date: Tue, 14 Nov 2023 18:27:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20--env=20=E6=94=AF=E6=8C=81=20gpt-4-visi?=
 =?UTF-8?q?on-preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AttachImage.tsx                |  32 +++++
 app/components/History.tsx                    |   6 +-
 app/components/Menu.tsx                       |   2 +-
 app/components/Message.tsx                    | 118 ++++++++++++++++--
 app/components/MessageDetail.tsx              |   4 +-
 app/components/Settings.tsx                   |   4 +-
 app/components/TextareaForm.tsx               |  39 +++---
 app/components/buttons/AttachImageButton.tsx  |  50 ++++++++
 .../buttons/DeleteHistoryButton.tsx           |   2 +-
 app/components/buttons/LoginButton.tsx        |   2 +-
 app/components/buttons/MenuEntryButton.tsx    |   2 +
 app/context/ChatContext.tsx                   |  86 ++++++++++++-
 app/context/SettingsContext.tsx               |   8 +-
 app/globals.css                               |  19 ++-
 app/utils/constants.ts                        |  62 +++++----
 app/utils/image.ts                            | 110 ++++++++++++++++
 app/utils/message.ts                          |  30 ++++-
 17 files changed, 499 insertions(+), 77 deletions(-)
 create mode 100644 app/components/AttachImage.tsx
 create mode 100644 app/components/buttons/AttachImageButton.tsx
 create mode 100644 app/utils/image.ts

diff --git a/app/components/AttachImage.tsx b/app/components/AttachImage.tsx
new file mode 100644
index 00000000..4be9ed05
--- /dev/null
+++ b/app/components/AttachImage.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import Image from 'next/image';
+import type { FC } from 'react';
+import { useContext } from 'react';
+
+import { ChatContext } from '@/context/ChatContext';
+
+import { AttachImageButton } from './buttons/AttachImageButton';
+
+export const AttachImage: FC = () => {
+  const { images, deleteImage } = useContext(ChatContext)!;
+
+  return (
+    <div className="flex flex-row-reverse items-center">
+      <AttachImageButton />
+      {[...images].reverse().map((imageProp, index) => (
+        <div key={index} className="attach-image-container relative mr-[-28px] z-10 cursor-pointer">
+          <XMarkIcon
+            className="attach-image-delete absolute top-0 right-0 w-5 h-5 p-0.5 m-0.5 rounded-sm hidden"
+            onClick={() => {
+              // 因为前面将 images revert 了，所以这里需要计算真正的 index
+              deleteImage(images.length - 1 - index);
+            }}
+          />
+          <Image {...imageProp} className="h-16 w-14 object-cover rounded border-[0.5px] border-gray" alt="图片" />
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/app/components/History.tsx b/app/components/History.tsx
index d88b39da..d646ad48 100644
--- a/app/components/History.tsx
+++ b/app/components/History.tsx
@@ -11,7 +11,7 @@ import { SettingsContext } from '@/context/SettingsContext';
 import { FULL_SPACE } from '@/utils/constants';
 import { exportJSON } from '@/utils/export';
 import { last } from '@/utils/last';
-import { getContent } from '@/utils/message';
+import { getContentText } from '@/utils/message';
 
 import { DeleteHistoryButton } from './buttons/DeleteHistoryButton';
 
@@ -65,13 +65,13 @@ export const HistoryItemComp: FC<{ historyIndex: 'current' | number; isActive: b
       })}
       onClick={() => historyIndex !== 'current' && loadHistory(historyIndex)}
     >
-      <h3 className="overflow-hidden whitespace-nowrap truncate">{getContent(historyItem.messages[0])}</h3>
+      <h3 className="overflow-hidden whitespace-nowrap truncate">{getContentText(historyItem.messages[0])}</h3>
       <p
         className={classNames('mt-1 text-gray text-[15px] overflow-hidden whitespace-nowrap truncate', {
           'pr-8 md:pr-4': isActive,
         })}
       >
-        {historyItem.messages.length > 1 ? getContent(last(historyItem.messages)) : FULL_SPACE}
+        {historyItem.messages.length > 1 ? getContentText(last(historyItem.messages)) : FULL_SPACE}
       </p>
       {isActive && <DeleteHistoryButton historyIndex={historyIndex} />}
     </li>
diff --git a/app/components/Menu.tsx b/app/components/Menu.tsx
index 803eed93..262231d9 100644
--- a/app/components/Menu.tsx
+++ b/app/components/Menu.tsx
@@ -107,7 +107,7 @@ const MenuTabs = () => {
         return (
           <button
             key={key}
-            className={classNames({
+            className={classNames('button-icon', {
               'text-gray-700 hover:text-gray-700': currentMenu === key,
               'dark:text-gray-200 dark:hover:text-gray-200': currentMenu === key,
             })}
diff --git a/app/components/Message.tsx b/app/components/Message.tsx
index 5adc4eaf..c91284a4 100644
--- a/app/components/Message.tsx
+++ b/app/components/Message.tsx
@@ -1,13 +1,20 @@
 'use client';
 
 import classNames from 'classnames';
+import Image from 'next/image';
 import type { FC, ReactNode } from 'react';
 import { useCallback, useContext, useState } from 'react';
 
 import { MessageDetailContext } from '@/context/MessageDetailContext';
 import { SettingsContext } from '@/context/SettingsContext';
-import { Model, Role } from '@/utils/constants';
-import type { ChatResponse, Message as MessageType } from '@/utils/constants';
+import { MessageContentType, Model, Role } from '@/utils/constants';
+import type {
+  ChatResponse,
+  MessageContentItemImageUrl,
+  MessageContentItemText,
+  Message as MessageType,
+  StructuredMessageContentItem,
+} from '@/utils/constants';
 import { formatMessage, FormatMessageMode } from '@/utils/formatMessage';
 import { getContent, getRole } from '@/utils/message';
 import { disableScroll, scrollToTop } from '@/utils/scroll';
@@ -19,9 +26,6 @@ import { HeroiconsUser } from './icons/HeroiconsUser';
  * 单个消息气泡
  */
 export const Message: FC<MessageType | ChatResponse> = (props) => {
-  const { settings } = useContext(SettingsContext)!;
-  const { setMessageDetail, setFormatMessageMode } = useContext(MessageDetailContext)!;
-
   const role = getRole(props);
   const content = getContent(props);
   const isError = !!(props as MessageType).isError;
@@ -29,7 +33,59 @@ export const Message: FC<MessageType | ChatResponse> = (props) => {
   const isUser = role === Role.user;
   const isAssistant = role === Role.assistant;
 
+  let structuredMessageContent: StructuredMessageContentItem[] = [];
+
+  if (typeof content === 'string') {
+    structuredMessageContent.push({
+      type: MessageContentType.text,
+      text: content,
+    });
+  } else {
+    structuredMessageContent = content;
+  }
+
+  return (
+    <>
+      {structuredMessageContent.map((messageContent, index) => {
+        if (messageContent.type === MessageContentType.text) {
+          return (
+            <MessageContentItemTextComp
+              key={index}
+              {...messageContent}
+              isAssistant={isAssistant}
+              isUser={isUser}
+              isError={isError}
+            />
+          );
+        }
+        if (messageContent.type === MessageContentType.image_url) {
+          return (
+            <MessageContentItemImageUrlComp key={index} {...messageContent} isAssistant={isAssistant} isUser={isUser} />
+          );
+        }
+        return null;
+      })}
+    </>
+  );
+};
+
+/**
+ * 文本消息
+ */
+export const MessageContentItemTextComp: FC<
+  MessageContentItemText & {
+    isAssistant: boolean;
+    isUser: boolean;
+    isError: boolean;
+  }
+> = (props) => {
+  const { text, isAssistant, isUser, isError } = props;
+
+  const { settings } = useContext(SettingsContext)!;
+  const { setMessageDetail, setFormatMessageMode } = useContext(MessageDetailContext)!;
+
   const [lastTapTime, setLastTapTime] = useState(0);
+
   const handleTap = useCallback(() => {
     const currentTime = new Date().getTime();
     const tapLength = currentTime - lastTapTime;
@@ -37,7 +93,7 @@ export const Message: FC<MessageType | ChatResponse> = (props) => {
     if (tapLength < 500 && tapLength > 0) {
       scrollToTop();
       disableScroll();
-      setMessageDetail(content);
+      setMessageDetail(text);
       setFormatMessageMode(isAssistant ? FormatMessageMode.partial : FormatMessageMode.zero);
       // 处理双击事件
     } else {
@@ -45,7 +101,7 @@ export const Message: FC<MessageType | ChatResponse> = (props) => {
     }
 
     setLastTapTime(currentTime);
-  }, [lastTapTime, setLastTapTime, content, setMessageDetail, isAssistant, setFormatMessageMode]);
+  }, [lastTapTime, setLastTapTime, text, setMessageDetail, isAssistant, setFormatMessageMode]);
 
   return (
     <div
@@ -56,8 +112,8 @@ export const Message: FC<MessageType | ChatResponse> = (props) => {
       {isAssistant ? (
         <ChatGPTIcon
           className={classNames('rounded w-10 h-10 p-1  text-white', {
-            'bg-[#1aa181]': [Model['gpt-3.5-turbo'], Model['gpt-3.5-turbo-0613']].includes(settings.model),
-            'bg-[#a969f8]': [Model['gpt-4'], Model['gpt-4-0613'], Model['gpt-4-32k'], Model['gpt-4-32k-0613']].includes(
+            'bg-[#1aa181]': [Model['gpt-3.5-turbo']].includes(settings.model),
+            'bg-[#a969f8]': [Model['gpt-4'], Model['gpt-4-32k'], Model['gpt-4-vision-preview']].includes(
               settings.model,
             ),
           })}
@@ -72,7 +128,7 @@ export const Message: FC<MessageType | ChatResponse> = (props) => {
           'text-red-500': isError,
         })}
         dangerouslySetInnerHTML={{
-          __html: formatMessage(content, isAssistant ? FormatMessageMode.partial : FormatMessageMode.zero),
+          __html: formatMessage(text, isAssistant ? FormatMessageMode.partial : FormatMessageMode.zero),
         }}
         onTouchEnd={handleTap}
       />
@@ -87,6 +143,48 @@ export const Message: FC<MessageType | ChatResponse> = (props) => {
   );
 };
 
+/**
+ * 图片消息
+ */
+export const MessageContentItemImageUrlComp: FC<
+  MessageContentItemImageUrl & {
+    isAssistant: boolean;
+    isUser: boolean;
+  }
+> = (props) => {
+  const { image_url, isAssistant, isUser } = props;
+
+  const { settings } = useContext(SettingsContext)!;
+
+  return (
+    <div
+      className={classNames('relative px-3 my-4 flex', {
+        'flex-row-reverse': isUser,
+      })}
+    >
+      {isAssistant ? (
+        <ChatGPTIcon
+          className={classNames('rounded w-10 h-10 p-1  text-white', {
+            'bg-[#1aa181]': [Model['gpt-3.5-turbo']].includes(settings.model),
+            'bg-[#a969f8]': [Model['gpt-4'], Model['gpt-4-32k'], Model['gpt-4-vision-preview']].includes(
+              settings.model,
+            ),
+          })}
+        />
+      ) : (
+        <HeroiconsUser className="rounded w-10 h-10 p-1.5 bg-white dark:bg-gray-200" />
+      )}
+      <Image
+        src={image_url.url}
+        alt="图片"
+        className="mx-3 max-w-[calc(100%-6rem)]"
+        width={image_url.width / 4 ?? 192}
+        height={image_url.height / 4 ?? 192}
+      />
+    </div>
+  );
+};
+
 /**
  * 系统消息
  */
diff --git a/app/components/MessageDetail.tsx b/app/components/MessageDetail.tsx
index dce50102..78cc93c2 100644
--- a/app/components/MessageDetail.tsx
+++ b/app/components/MessageDetail.tsx
@@ -29,7 +29,7 @@ export const MessageDetail = () => {
       <div className="flex">
         <div className="flex-grow" />
         <button
-          className="flex"
+          className="button-icon flex"
           onClick={() => {
             const revertFormatMessageMode = {
               [FormatMessageMode.zero]: FormatMessageMode.partial,
@@ -48,7 +48,7 @@ export const MessageDetail = () => {
           </span>
         </button>
         <button
-          className="text-gray-700 dark:text-gray-200"
+          className="button-icon text-gray-700 dark:text-gray-200"
           onClick={() => {
             setMessageDetail(undefined);
             enableScroll();
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index a810eb44..cbac0907 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -5,7 +5,7 @@ import { useContext } from 'react';
 import { ChatContext } from '@/context/ChatContext';
 import { SettingsContext } from '@/context/SettingsContext';
 import type { Model } from '@/utils/constants';
-import { AllModels, MAX_TOKENS, MIN_TOKENS, Role, TOKENS_STEP } from '@/utils/constants';
+import { AllModels, MAX_TOKENS, MIN_TOKENS, Role } from '@/utils/constants';
 
 /**
  * 聊天记录
@@ -76,7 +76,7 @@ export const Settings = () => {
         <input
           className="w-36 mr-2"
           type="range"
-          step={TOKENS_STEP[settings.model]}
+          step={(MAX_TOKENS[settings.model] - MIN_TOKENS[settings.model]) / 1024 < 7 ? 512 : 1024}
           min={MIN_TOKENS[settings.model]}
           max={MAX_TOKENS[settings.model]}
           value={settings.max_tokens ?? MAX_TOKENS[settings.model]}
diff --git a/app/components/TextareaForm.tsx b/app/components/TextareaForm.tsx
index d1a416ff..6ec87e42 100644
--- a/app/components/TextareaForm.tsx
+++ b/app/components/TextareaForm.tsx
@@ -6,16 +6,20 @@ import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { ChatContext } from '@/context/ChatContext';
 import { DeviceContext } from '@/context/DeviceContext';
 import { LoginContext } from '@/context/LoginContext';
+import { SettingsContext } from '@/context/SettingsContext';
 import { isDomChildren } from '@/utils/isDomChildren';
 
+import { AttachImage } from './AttachImage';
+
 export const TextareaForm: FC = () => {
   const { isMobile } = useContext(DeviceContext)!;
   const { isLogged } = useContext(LoginContext)!;
-  const { sendMessage } = useContext(ChatContext)!;
+  const { settings } = useContext(SettingsContext)!;
+  const { images, sendMessage } = useContext(ChatContext)!;
 
   // 是否正在中文输入
   const [isComposing, setIsComposing] = useState(false);
-  const [submitDisabled, setSubmitDisabled] = useState(true);
+  const [isTextareaEmpty, setIsTextareaEmpty] = useState(true);
   const formContainerRef = useRef<HTMLDivElement>(null);
   const placeholderRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -38,14 +42,14 @@ export const TextareaForm: FC = () => {
   }, []);
 
   /**
-   * 更新 submit 按钮的 disable 态
+   * 更新 textarea 的 empty 状态
    */
-  const updateSubmitDisabled = useCallback(() => {
+  const updateIsTextareaEmpty = useCallback(() => {
     const value = textareaRef.current?.value?.trim();
     if (value) {
-      setSubmitDisabled(false);
+      setIsTextareaEmpty(false);
     } else {
-      setSubmitDisabled(true);
+      setIsTextareaEmpty(true);
     }
   }, []);
 
@@ -74,15 +78,15 @@ export const TextareaForm: FC = () => {
     updateTextareaHeight();
     // 保持滚动到最底下，bug 太多，先关闭
     // scrollToBottom();
-    updateSubmitDisabled();
-  }, [updateTextareaHeight, updateSubmitDisabled]);
+    updateIsTextareaEmpty();
+  }, [updateTextareaHeight, updateIsTextareaEmpty]);
   /** 中文输入法控制 */
   const onCompositionStart = useCallback(() => setIsComposing(true), []);
   const onCompositionEnd = useCallback(() => {
     setIsComposing(false);
     // 由于 onChange 和 onCompositionEnd 的时序问题，这里也需要调用 updateSubmitDisabled
-    updateSubmitDisabled();
-  }, [updateSubmitDisabled]);
+    updateIsTextareaEmpty();
+  }, [updateIsTextareaEmpty]);
 
   /**
    * 提交表单处理
@@ -91,18 +95,15 @@ export const TextareaForm: FC = () => {
     async (e?: FormEvent<HTMLFormElement>) => {
       e?.preventDefault();
       const value = textareaRef.current?.value?.trim();
-      if (!value) {
-        return;
-      }
       // 提交后清空内容
       if (textareaRef.current?.value) {
         textareaRef.current.value = '';
       }
       updateTextareaHeight();
-      updateSubmitDisabled();
+      updateIsTextareaEmpty();
       await sendMessage(value);
     },
-    [sendMessage, updateTextareaHeight, updateSubmitDisabled],
+    [sendMessage, updateTextareaHeight, updateIsTextareaEmpty],
   );
 
   /**
@@ -157,8 +158,14 @@ export const TextareaForm: FC = () => {
             onCompositionEnd={onCompositionEnd}
             rows={1}
           />
+          {settings.model.includes('vision') && <AttachImage />}
           <div className="flex items-center">
-            <input className="px-3 py-2 h-full max-h-16" type="submit" disabled={submitDisabled} value="发送" />
+            <input
+              className="px-3 py-2 h-full max-h-16"
+              type="submit"
+              disabled={isTextareaEmpty && images.length === 0}
+              value="发送"
+            />
           </div>
         </form>
       </div>
diff --git a/app/components/buttons/AttachImageButton.tsx b/app/components/buttons/AttachImageButton.tsx
new file mode 100644
index 00000000..00147f6a
--- /dev/null
+++ b/app/components/buttons/AttachImageButton.tsx
@@ -0,0 +1,50 @@
+import { PhotoIcon, PlusIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { useContext } from 'react';
+
+import { ChatContext } from '@/context/ChatContext';
+import { LoginContext } from '@/context/LoginContext';
+import { readImageFile } from '@/utils/image';
+
+/**
+ * 添加图片
+ */
+export const AttachImageButton: FC<{}> = () => {
+  const { images, appendImages } = useContext(ChatContext)!;
+  const { isLogged } = useContext(LoginContext)!;
+
+  return (
+    <div className="h-full max-h-16">
+      <label
+        htmlFor="input-attach-image"
+        className={classNames('button-attach-image flex items-center w-14 py-2 h-full max-h-16', {
+          disabled: !isLogged || images.length === 9,
+          'px-[18px]': images.length === 0,
+          'pl-[28px] pr-[8px]': images.length > 0,
+        })}
+      >
+        {images.length === 0 ? <PhotoIcon /> : <PlusIcon />}
+      </label>
+
+      <input
+        id="input-attach-image"
+        type="file"
+        multiple
+        accept="image/jpeg, image/png"
+        disabled={!isLogged || images.length === 9}
+        className="hidden"
+        onChange={async (e) => {
+          const files = e.target.files;
+          // 确保文件已被选择
+          if (files === null || files.length === 0) {
+            return;
+          }
+
+          const images = await Promise.all(Array.from(files).map(readImageFile));
+          appendImages(...images);
+        }}
+      />
+    </div>
+  );
+};
diff --git a/app/components/buttons/DeleteHistoryButton.tsx b/app/components/buttons/DeleteHistoryButton.tsx
index e271efec..d10e93c2 100644
--- a/app/components/buttons/DeleteHistoryButton.tsx
+++ b/app/components/buttons/DeleteHistoryButton.tsx
@@ -12,7 +12,7 @@ export const DeleteHistoryButton: FC<{ historyIndex: 'current' | number }> = ({
 
   return (
     <button
-      className="absolute bottom-0 right-0"
+      className="button-icon absolute bottom-0 right-0"
       onClick={(e) => {
         // 点击删除时，阻止冒泡
         e.stopPropagation();
diff --git a/app/components/buttons/LoginButton.tsx b/app/components/buttons/LoginButton.tsx
index 24679110..dedcdb50 100644
--- a/app/components/buttons/LoginButton.tsx
+++ b/app/components/buttons/LoginButton.tsx
@@ -32,7 +32,7 @@ export const LoginButton = () => {
 
   return (
     <button
-      className={classNames({
+      className={classNames('button-icon', {
         'text-green-600 hover:text-green-700': isLogged,
         'text-red-500 hover:text-red-600': !isLogged,
       })}
diff --git a/app/components/buttons/MenuEntryButton.tsx b/app/components/buttons/MenuEntryButton.tsx
index 65273b9a..cb8dd115 100644
--- a/app/components/buttons/MenuEntryButton.tsx
+++ b/app/components/buttons/MenuEntryButton.tsx
@@ -27,6 +27,7 @@ export const MenuEntryButton = () => {
   if (history.length > 0) {
     return (
       <button
+        className="button-icon"
         onClick={() => {
           scrollToTop();
           setCurrentMenu(MenuKey.InboxStack);
@@ -40,6 +41,7 @@ export const MenuEntryButton = () => {
 
   return (
     <button
+      className="button-icon"
       onClick={() => {
         scrollToTop();
         setCurrentMenu(MenuKey.AdjustmentsHorizontal);
diff --git a/app/context/ChatContext.tsx b/app/context/ChatContext.tsx
index 37ab543b..d301eb54 100644
--- a/app/context/ChatContext.tsx
+++ b/app/context/ChatContext.tsx
@@ -6,9 +6,10 @@ import { createContext, useCallback, useContext, useEffect, useState } from 'rea
 
 import { fetchApiChat } from '@/utils/api';
 import { getCache, setCache } from '@/utils/cache';
-import type { ChatResponse, Message } from '@/utils/constants';
-import { MAX_TOKENS, Model, Role } from '@/utils/constants';
+import type { ChatResponse, Message, StructuredMessageContentItem } from '@/utils/constants';
+import { MAX_TOKENS, MessageContentType, Model, Role } from '@/utils/constants';
 import type { ResError } from '@/utils/error';
+import type { ImageProp } from '@/utils/image';
 import { isMessage } from '@/utils/message';
 import { gapToBottom, getIsScrolling, scrollToBottom } from '@/utils/scroll';
 import { sleep } from '@/utils/sleep';
@@ -29,9 +30,12 @@ export interface HistoryItem {
  * 对话相关的 Context
  */
 export const ChatContext = createContext<{
-  sendMessage: (content: string) => Promise<void>;
+  sendMessage: (content?: string) => Promise<void>;
   isLoading: boolean;
   messages: (Message | ChatResponse)[];
+  images: ImageProp[];
+  appendImages: (...images: ImageProp[]) => void;
+  deleteImage: (index: number) => void;
   history: HistoryItem[] | undefined;
   historyIndex: 'empty' | 'current' | number;
   loadHistory: (historyIndex: number) => void;
@@ -44,6 +48,7 @@ export const ChatProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const { settings, setSettings } = useContext(SettingsContext)!;
   const [isLoading, setIsLoading] = useState(false);
   const [messages, setMessages] = useState<(Message | ChatResponse)[]>([]);
+  const [images, setImages] = useState<ImageProp[]>([]);
   const [history, setHistory] = useState<HistoryItem[] | undefined>(undefined);
   // 当前选中的对话在 history 中的 index，empty 表示未选中，current 表示选中的是当前对话
   const [historyIndex, setHistoryIndex] = useState<'empty' | 'current' | number>('empty');
@@ -80,7 +85,12 @@ export const ChatProvider: FC<{ children: ReactNode }> = ({ children }) => {
    * 发送消息
    */
   const sendMessage = useCallback(
-    async (content: string) => {
+    async (content?: string) => {
+      // 如果是空消息
+      if ((content === undefined || content.length === 0) && images.length === 0) {
+        return;
+      }
+
       // 先获取旧的 messages 的备份
       let newMessages = [...messages];
       // 如果当前是在浏览聊天记录，则激活历史消息
@@ -93,10 +103,45 @@ export const ChatProvider: FC<{ children: ReactNode }> = ({ children }) => {
         setCache('messages', newMessages);
       }
 
+      let newMessage: Message;
+      // 没图片时，插入单条文字消息
+      if (images.length === 0) {
+        newMessage = {
+          role: Role.user,
+          content: content as string,
+        };
+      }
+      // 有图片时则插入混合消息
+      else {
+        newMessage = {
+          role: Role.user,
+          content: images.map((image) => ({
+            type: MessageContentType.image_url,
+            image_url: {
+              url: image.src,
+              width: image.width,
+              height: image.height,
+            },
+          })),
+        };
+        // 如果有文字，则在最前面插入文字消息
+        if (content) {
+          newMessage.content = [
+            {
+              type: MessageContentType.text,
+              text: content,
+            },
+            ...(newMessage.content as StructuredMessageContentItem[]),
+          ];
+        }
+      }
+
       // 先插入一条用户消息
-      newMessages = [...newMessages, { role: Role.user, content }];
+      newMessages = [...newMessages, newMessage];
       setMessages(newMessages);
       setCache('messages', newMessages);
+      // 清空已上传的图片
+      setImages([]);
       setIsLoading(true);
       setHistoryIndex('current');
       await sleep(16);
@@ -122,6 +167,10 @@ export const ChatProvider: FC<{ children: ReactNode }> = ({ children }) => {
         }
         // TODO 收到完整消息后，写入 cache 中
         const fullContent = await fetchApiChat({
+          // gpt-4-vision-preview 有个 bug：不传 max_tokens 时，会中断消息
+          ...(settings.model === Model['gpt-4-vision-preview'] && settings.max_tokens === undefined
+            ? { max_tokens: MAX_TOKENS['gpt-4-vision-preview'] }
+            : undefined),
           ...omit(settings, 'maxHistoryLength', 'systemMessage', 'prefixMessages', 'availableModels'),
           messages: fetchApiChatMessages,
           stream: true,
@@ -154,7 +203,7 @@ export const ChatProvider: FC<{ children: ReactNode }> = ({ children }) => {
         ]);
       }
     },
-    [settings, messages, history, historyIndex],
+    [settings, messages, images, history, historyIndex],
   );
 
   /**
@@ -287,12 +336,37 @@ export const ChatProvider: FC<{ children: ReactNode }> = ({ children }) => {
     setHistoryIndex('empty');
   }, [messages, history, settings.model]);
 
+  const appendImages = useCallback(
+    (...newImages: ImageProp[]) => {
+      const finalImages = [...images, ...newImages];
+      if (finalImages.length > 9) {
+        setImages(finalImages.slice(0, 9));
+        alert('最多只能发送九张图片，超出的图片已删除');
+        return;
+      }
+      setImages(finalImages);
+    },
+    [images],
+  );
+
+  const deleteImage = useCallback(
+    (index: number) => {
+      const finalImages = [...images];
+      finalImages.splice(index, 1);
+      setImages(finalImages);
+    },
+    [images],
+  );
+
   return (
     <ChatContext.Provider
       value={{
         sendMessage,
         isLoading,
         messages,
+        images,
+        appendImages,
+        deleteImage,
         history,
         historyIndex,
         loadHistory,
diff --git a/app/context/SettingsContext.tsx b/app/context/SettingsContext.tsx
index 297e56e6..c8e8f3af 100644
--- a/app/context/SettingsContext.tsx
+++ b/app/context/SettingsContext.tsx
@@ -5,20 +5,20 @@ import { createContext, useCallback, useEffect, useReducer } from 'react';
 
 import { fetchApiModels } from '@/utils/api';
 import { getCache, setCache } from '@/utils/cache';
-import type { ChatRequest, Message } from '@/utils/constants';
+import type { ChatRequest, SimpleStringMessage } from '@/utils/constants';
 import { AllModels, MAX_TOKENS, Model } from '@/utils/constants';
 
 export interface SettingsState extends Omit<ChatRequest, 'messages'> {
   maxHistoryLength: number;
-  systemMessage?: Message;
-  prefixMessages?: Message[];
+  systemMessage?: SimpleStringMessage;
+  prefixMessages?: SimpleStringMessage[];
   availableModels: Model[];
 }
 
 const INITIAL_SETTINGS: SettingsState = {
   model: Model['gpt-3.5-turbo'],
   maxHistoryLength: 6,
-  availableModels: [Model['gpt-3.5-turbo'], Model['gpt-3.5-turbo-0613']],
+  availableModels: [Model['gpt-3.5-turbo']],
 };
 
 enum SettingsActionType {
diff --git a/app/globals.css b/app/globals.css
index 62db9ad9..68511fce 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -40,23 +40,29 @@ select {
 /* 按钮和输入框统一样式 */
 input,
 button,
-textarea {
+textarea,
+.button-attach-image {
   @apply rounded;
   @apply focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-500;
 }
-button {
+.button-icon {
   @apply w-10 h-10 m-2 p-[0.625rem];
   @apply cursor-pointer text-gray-400 hover:text-gray-500;
   @apply dark:text-gray-500 dark:hover:text-gray-400;
 }
 
 input[type='button'],
-input[type='submit'] {
+input[type='submit'],
+.button-attach-image {
   @apply cursor-pointer bg-white hover:bg-gray-200;
   @apply disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-400;
   @apply dark:bg-gray-800 dark:hover:bg-gray-700;
   @apply dark:disabled:bg-gray-700 dark:disabled:text-gray-500;
 }
+.button-attach-image.disabled {
+  @apply cursor-not-allowed bg-gray-200 text-gray-400;
+  @apply dark:bg-gray-700 dark:text-gray-500;
+}
 
 /* 用于 fixed 宽度设置 */
 .w-inherit {
@@ -98,3 +104,10 @@ input[type='submit'] {
   @apply float-right cursor-pointer hover:text-gray-500;
   @apply dark:hover:text-gray-300;
 }
+
+.attach-image-container:hover .attach-image-delete {
+  @apply block bg-white bg-opacity-50;
+}
+.attach-image-container .attach-image-delete:hover {
+  @apply bg-opacity-100;
+}
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 19605d53..7e54947f 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -34,63 +34,73 @@ export enum Role {
  */
 export enum Model {
   'gpt-3.5-turbo' = 'gpt-3.5-turbo',
-  'gpt-3.5-turbo-0613' = 'gpt-3.5-turbo-0613',
   'gpt-3.5-turbo-16k' = 'gpt-3.5-turbo-16k',
-  'gpt-3.5-turbo-16k-0613' = 'gpt-3.5-turbo-16k-0613',
   'gpt-4' = 'gpt-4',
-  'gpt-4-0613' = 'gpt-4-0613',
   'gpt-4-32k' = 'gpt-4-32k',
-  'gpt-4-32k-0613' = 'gpt-4-32k-0613',
+  'gpt-4-vision-preview' = 'gpt-4-vision-preview',
 }
 
 export const AllModels = [
   Model['gpt-3.5-turbo'],
-  Model['gpt-3.5-turbo-0613'],
   Model['gpt-3.5-turbo-16k'],
-  Model['gpt-3.5-turbo-16k-0613'],
   Model['gpt-4'],
-  Model['gpt-4-0613'],
   Model['gpt-4-32k'],
-  Model['gpt-4-32k-0613'],
+  Model['gpt-4-vision-preview'],
 ];
 
 export const MIN_TOKENS: Record<Model, number> = {
   [Model['gpt-3.5-turbo']]: 1024,
-  [Model['gpt-3.5-turbo-0613']]: 1024,
   [Model['gpt-3.5-turbo-16k']]: 1024,
-  [Model['gpt-3.5-turbo-16k-0613']]: 1024,
   [Model['gpt-4']]: 1024,
-  [Model['gpt-4-0613']]: 1024,
   [Model['gpt-4-32k']]: 1024,
-  [Model['gpt-4-32k-0613']]: 1024,
+  [Model['gpt-4-vision-preview']]: 1024,
 };
 
 export const MAX_TOKENS: Record<Model, number> = {
   [Model['gpt-3.5-turbo']]: 4096,
-  [Model['gpt-3.5-turbo-0613']]: 4096,
   [Model['gpt-3.5-turbo-16k']]: 16384,
-  [Model['gpt-3.5-turbo-16k-0613']]: 16384,
   [Model['gpt-4']]: 8192,
-  [Model['gpt-4-0613']]: 8192,
   [Model['gpt-4-32k']]: 32768,
-  [Model['gpt-4-32k-0613']]: 32768,
+  [Model['gpt-4-vision-preview']]: 4096,
 };
 
-export const TOKENS_STEP: Record<Model, number> = {
-  [Model['gpt-3.5-turbo']]: 512,
-  [Model['gpt-3.5-turbo-0613']]: 512,
-  [Model['gpt-3.5-turbo-16k']]: 1024,
-  [Model['gpt-3.5-turbo-16k-0613']]: 1024,
-  [Model['gpt-4']]: 1024,
-  [Model['gpt-4-0613']]: 1024,
-  [Model['gpt-4-32k']]: 1024,
-  [Model['gpt-4-32k-0613']]: 1024,
-};
+export enum MessageContentType {
+  text = 'text',
+  image_url = 'image_url',
+}
+
+export interface MessageContentItemText {
+  type: MessageContentType.text;
+  text: string;
+}
+export interface MessageContentItemImageUrl {
+  type: MessageContentType.image_url;
+  image_url: {
+    url: string;
+    width: number;
+    height: number;
+  };
+}
+
+/**
+ * 结构化的 MessageContent
+ */
+export type StructuredMessageContentItem = MessageContentItemText | MessageContentItemImageUrl;
 
 /**
  * 单条消息
  */
 export interface Message {
+  isError?: boolean;
+  role: Role;
+  content: string | StructuredMessageContentItem[];
+}
+
+/**
+ * 简单文本消息
+ * @TODO 实现 isSimpleStringMessage 方法
+ */
+export interface SimpleStringMessage {
   isError?: boolean;
   role: Role;
   content: string;
diff --git a/app/utils/image.ts b/app/utils/image.ts
new file mode 100644
index 00000000..4c9d0e62
--- /dev/null
+++ b/app/utils/image.ts
@@ -0,0 +1,110 @@
+export interface ImageProp {
+  src: string;
+  width: number;
+  height: number;
+}
+
+/**
+ * 图片按照这个方式缩放：
+ * Image inputs are metered and charged in tokens, just as text inputs are.
+ * The token cost of a given image is determined by two factors: its size, and the detail option on each image_url block.
+ * All images with detail: low cost 85 tokens each.
+ * detail: high images are first scaled to fit within a 2048 x 2048 square, maintaining their aspect ratio.
+ * Then, they are scaled such that the shortest side of the image is 768px long.
+ * Finally, we count how many 512px squares the image consists of.
+ * Each of those squares costs 170 tokens. Another 85 tokens are always added to the final total.
+ */
+export function smallImageSize({ width, height }: { width: number; height: number }) {
+  const isWidthLongerThanHeight = width > height;
+  /** 长边 */
+  let longerSide = isWidthLongerThanHeight ? width : height;
+  /** 短边 */
+  let shorterSide = isWidthLongerThanHeight ? height : width;
+  /** 若长边大于 2048 */
+  if (longerSide > 2048) {
+    shorterSide = (shorterSide / longerSide) * 2048;
+    longerSide = 2048;
+  }
+  /** 若短边大于 768 */
+  if (shorterSide > 768) {
+    longerSide = (longerSide / shorterSide) * 768;
+    shorterSide = 768;
+  }
+  /** 取整数 */
+  longerSide = Math.round(longerSide);
+  shorterSide = Math.round(shorterSide);
+
+  return {
+    width: isWidthLongerThanHeight ? longerSide : shorterSide,
+    height: isWidthLongerThanHeight ? shorterSide : longerSide,
+  };
+}
+
+/**
+ * 压缩图片为 openai 接受的尺寸
+ */
+export async function compressImage(imgSrc: string): Promise<ImageProp> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = imgSrc;
+
+    img.onload = () => {
+      // 创建一个canvas元素
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d')!;
+
+      const originalSize = {
+        width: img.width,
+        height: img.height,
+      };
+      const size = smallImageSize(originalSize);
+
+      // 如果不需要压缩尺寸
+      if (originalSize.width === size.width && originalSize.height === size.height) {
+        return resolve({
+          src: imgSrc,
+          ...size,
+        });
+      }
+
+      // 设置canvas尺寸
+      canvas.width = size.width;
+      canvas.height = size.height;
+
+      // 绘制图片到canvas
+      ctx.drawImage(img, 0, 0, size.width, size.height);
+
+      // 压缩图片的质量
+      const quality = 0.8; // 压缩质量设置为0.8
+      const compressedImage = canvas.toDataURL('image/jpeg', quality);
+
+      resolve({
+        src: compressedImage,
+        ...size,
+      });
+    };
+  });
+}
+
+/**
+ * 读取上传的图片文件
+ */
+export async function readImageFile(file: File): Promise<ImageProp> {
+  return new Promise((resolve) => {
+    // 创建FileReader来读取此文件
+    const reader = new FileReader();
+
+    // 设置当读取操作完成时触发的回调函数
+    reader.onload = async (readerEvent) => {
+      // 获取文件内容 base64 编码
+      const fileContent = readerEvent.target?.result as string;
+
+      // 压缩图片大小为 openai 接受的大小
+      const imageProp = await compressImage(fileContent);
+      resolve(imageProp);
+    };
+
+    // 读取文件并转换为Base64编码
+    reader.readAsDataURL(file);
+  });
+}
diff --git a/app/utils/message.ts b/app/utils/message.ts
index 1a593d62..a1fd8690 100644
--- a/app/utils/message.ts
+++ b/app/utils/message.ts
@@ -1,4 +1,5 @@
-import type { ChatResponse, Message } from './constants';
+import { MessageContentType } from './constants';
+import type { ChatResponse, Message, MessageContentItemText, StructuredMessageContentItem } from './constants';
 
 /**
  * 判断传入的 message 是简单的 Message 还是完整的 ChatResponse
@@ -13,10 +14,35 @@ export function isMessage(message: Message | ChatResponse): message is Message {
 /**
  * 从 message 中提取 content
  */
-export function getContent(message: Message | ChatResponse) {
+export function getContent(message: Message | ChatResponse): string | StructuredMessageContentItem[] {
   return isMessage(message) ? message.content : message.choices[0].message.content;
 }
 
+/**
+ * 从 message 中提取供侧边栏展示的 contentText
+ */
+export function getContentText(message: Message | ChatResponse): string {
+  const content = getContent(message);
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  const isFirstContentItemImageUrl = content[0].type === MessageContentType.image_url;
+  const firstTextContentItem = content.find(({ type }) => type === MessageContentType.text) as
+    | MessageContentItemText
+    | undefined;
+
+  const textList = [];
+  if (isFirstContentItemImageUrl) {
+    textList.push('[图片]');
+  }
+  if (firstTextContentItem) {
+    textList.push(firstTextContentItem.text);
+  }
+
+  return textList.join(' ');
+}
+
 /**
  * 从 message 中提取 role
  */