diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue
index 6ed5cc5..1a499c0 100644
--- a/src/components/chat/InputBox.vue
+++ b/src/components/chat/InputBox.vue
@@ -1,23 +1,58 @@
 <template>
   <div class="input-box">
+    <el-upload
+      v-model:file-list="fileList"
+      class="upload"
+      name="file"
+      :show-file-list="true"
+      :limit="1"
+      :multiple="false"
+      action="/api/v1/files/"
+      :on-exceed="onExceed"
+      :on-error="onError"
+      :headers="headers"
+    >
+      <el-tooltip class="box-item" effect="dark" :content="$t('chat.message.uploadFile')" placement="top">
+        <span class="btn btn-upload">
+          <font-awesome-icon icon="fa-solid fa-paperclip" class="icon icon-attachment" />
+        </span>
+      </el-tooltip>
+    </el-upload>
+    <span
+      :class="{
+        btn: true,
+        'btn-send': true,
+        disabled: !value
+      }"
+      @click="onSubmit"
+    >
+      <font-awesome-icon icon="fa-solid fa-location-arrow" class="icon icon-send" />
+    </span>
     <el-input
       v-model="value"
-      :rows="2"
+      :rows="1"
+      class="input"
       type="textarea"
       :placeholder="$t('chat.message.newMessagePlaceholder')"
       @keydown.enter.exact.prevent="onSubmit"
-    />
+    >
+    </el-input>
+    <p class="info">{{ $t('chat.message.howToUse') }}</p>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElInput } from 'element-plus';
+import { ElInput, ElMessage, ElTooltip, ElUpload } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
   name: 'InputBox',
   components: {
-    ElInput
+    ElInput,
+    ElTooltip,
+    FontAwesomeIcon,
+    ElUpload
   },
   props: {
     modelValue: {
@@ -28,9 +63,21 @@ export default defineComponent({
   emits: ['update:modelValue', 'submit'],
   data() {
     return {
-      value: this.modelValue
+      value: this.modelValue,
+      fileList: []
     };
   },
+  computed: {
+    headers() {
+      return {
+        Authorization: `Bearer ${this.$store.state.token.access}`
+      };
+    },
+    urls() {
+      // @ts-ignore
+      return this.fileList.map((file: UploadFile) => file?.response?.file_url);
+    }
+  },
   watch: {
     value(val) {
       this.$emit('update:modelValue', val);
@@ -43,24 +90,91 @@ export default defineComponent({
   },
   methods: {
     onSubmit() {
+      if (!this.value) {
+        return;
+      }
       this.$emit('submit', this.value);
+    },
+    onExceed() {
+      ElMessage.warning(this.$t('chat.message.uploadReferencesExceed'));
+    },
+    onError() {
+      ElMessage.error(this.$t('chat.message.uploadReferencesError'));
     }
   }
 });
 </script>
 
+<style lang="scss">
+.input-box {
+  .input {
+    textarea {
+      border: none;
+      background: none;
+      box-shadow: none;
+      resize: none;
+      line-height: 25px;
+    }
+  }
+  .el-upload-list {
+    position: absolute;
+    width: 200px;
+    bottom: 40px;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  .top {
-    display: flex;
-    flex-direction: column;
+.input-box {
+  position: relative;
+  width: 100%;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  background: none;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
+  top: 40px;
+  .upload {
+    display: inline-block;
+  }
+  .input {
+    border: none;
+    width: calc(100% - 80px);
+    margin-left: 30px;
   }
-  .bottom {
-    display: flex;
-    flex-direction: column;
+  .info {
+    display: block;
+    position: absolute;
+    font-size: 12px;
+    color: #666;
+    margin-top: 5px;
+    margin-left: 3px;
+  }
+  .btn {
+    display: block;
+    z-index: 10000;
+    cursor: pointer;
+    position: absolute;
+    top: 4px;
+    &.btn-upload {
+      left: 10px;
+      .icon-attachment {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+    &.btn-send {
+      right: 15px;
+      &.disabled {
+        .icon-send {
+          color: #eee;
+        }
+        cursor: not-allowed;
+      }
+      .icon-send {
+        font-size: 16px;
+        color: #666;
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/chat/ModelSelector.vue b/src/components/chat/ModelSelector.vue
index 0dbd7a8..be551e8 100644
--- a/src/components/chat/ModelSelector.vue
+++ b/src/components/chat/ModelSelector.vue
@@ -36,6 +36,7 @@ import {
   CHAT_MODEL_CHATGPT,
   CHAT_MODEL_CHATGPT4,
   CHAT_MODEL_CHATGPT4_BROWSING,
+  CHAT_MODEL_CHATGPT4_VISION,
   CHAT_MODEL_CHATGPT_16K,
   CHAT_MODEL_CHATGPT_BROWSING
 } from '@/operators/chat/constants';
@@ -52,7 +53,7 @@ const GROUPS = [
     label: '4.0',
     value: 'plus',
     icon: 'fa-solid fa-wand-magic-sparkles',
-    options: [CHAT_MODEL_CHATGPT4, CHAT_MODEL_CHATGPT4_BROWSING]
+    options: [CHAT_MODEL_CHATGPT4, CHAT_MODEL_CHATGPT4_BROWSING, CHAT_MODEL_CHATGPT4_VISION]
   }
 ];
 
diff --git a/src/components/midjourney/tasks/TaskPreview.vue b/src/components/midjourney/tasks/TaskPreview.vue
index ed4a56c..ddf64e3 100644
--- a/src/components/midjourney/tasks/TaskPreview.vue
+++ b/src/components/midjourney/tasks/TaskPreview.vue
@@ -46,7 +46,7 @@
           <font-awesome-icon icon="fa-solid fa-circle-info" class="mr-1" />
           {{ $t('midjourney.field.failureReason') }}:
           {{ modelValue?.response?.detail }}
-          <copy-to-clipboard :content="modelValue?.response?.detail" class="btn-copy" />
+          <copy-to-clipboard :content="modelValue?.response?.detail!" class="btn-copy" />
         </p>
         <p class="description">
           <font-awesome-icon icon="fa-solid fa-hashtag" class="mr-1" />
diff --git a/src/i18n/zh/chat/message.ts b/src/i18n/zh/chat/message.ts
index f3774dd..2523f79 100644
--- a/src/i18n/zh/chat/message.ts
+++ b/src/i18n/zh/chat/message.ts
@@ -1,8 +1,11 @@
 export default {
   startNewChat: '开始新的会话',
+  uploadFile: '上传文件',
   noToken: '请先申请对应服务',
   newMessagePlaceholder: '请输入你的问题...',
   noInput: '问题不能为空',
+  uploadReferencesExceed: '最多只能上传 1 个文件',
+  uploadReferencesError: '上传文件失败，请稍后重试',
   notApplied: '您尚未申请该服务，请先申请',
   tryForFree: '免费使用',
   initializing: '初始化中，请稍后...',
@@ -23,6 +26,6 @@ export default {
   errorUsedUp: '您的套餐次数已经用完，请购买更多次数继续使用',
   errorUnknown: '服务器出现未知错误，请稍后重试或联系客服',
   errorTimeout: '回答问题超时，请稍后重试',
-  howToBreakLine: '按 Shift+Enter 键可以换行',
+  howToUse: '按 Shift+Enter 键可以换行',
   noConversations: '没有历史会话，请先发起一个新的会话'
 };
diff --git a/src/operators/chat/constants.ts b/src/operators/chat/constants.ts
index f4626b7..b233c64 100644
--- a/src/operators/chat/constants.ts
+++ b/src/operators/chat/constants.ts
@@ -9,12 +9,14 @@ export const CHAT_MODEL_NAME_CHATGPT4 = 'chatgpt4';
 export const CHAT_MODEL_NAME_CHATGPT_16K = 'chatgpt-16k';
 export const CHAT_MODEL_NAME_CHATGPT_BROWSING = 'chatgpt-browsing';
 export const CHAT_MODEL_NAME_CHATGPT4_BROWSING = 'chatgpt4-browsing';
+export const CHAT_MODEL_NAME_CHATGPT4_VISION = 'chatgpt4-vision';
 
 export const API_ID_CHATGPT = '1d58971c-e3cd-4713-a3ce-854a731adb14';
 export const API_ID_CHATGPT_16K = 'bf93bb28-55a7-4428-ad82-156bf410f4e2';
 export const API_ID_CHATGPT_BROWSING = '12271e2e-794f-4079-a714-f68dd0df7808';
 export const API_ID_CHATGPT4 = '1c4e8fa3-362b-4e0a-b0fd-9ff9fc173b77';
 export const API_ID_CHATGPT4_BROWSING = 'a61de51b-d0d0-48a2-9a17-1d4986d5d497';
+export const API_ID_CHATGPT4_VISION = '098c6e4a-14ae-4ff1-8d2f-0968532a4638';
 
 export const CHAT_MODEL_CHATGPT: IChatModel = {
   apiId: API_ID_CHATGPT,
@@ -25,13 +27,13 @@ export const CHAT_MODEL_CHATGPT: IChatModel = {
 export const CHAT_MODEL_CHATGPT_16K: IChatModel = {
   apiId: API_ID_CHATGPT_16K,
   name: CHAT_MODEL_NAME_CHATGPT_16K,
-  displayName: '3.5 - 16k'
+  displayName: '3.5 - 16K'
 };
 
 export const CHAT_MODEL_CHATGPT_BROWSING: IChatModel = {
   apiId: API_ID_CHATGPT_BROWSING,
   name: CHAT_MODEL_NAME_CHATGPT_BROWSING,
-  displayName: '3.5 - 联网版'
+  displayName: '3.5 - 联网'
 };
 
 export const CHAT_MODEL_CHATGPT4: IChatModel = {
@@ -43,5 +45,11 @@ export const CHAT_MODEL_CHATGPT4: IChatModel = {
 export const CHAT_MODEL_CHATGPT4_BROWSING: IChatModel = {
   apiId: API_ID_CHATGPT4_BROWSING,
   name: CHAT_MODEL_NAME_CHATGPT4_BROWSING,
-  displayName: '4.0 - 联网版'
+  displayName: '4.0 - 联网'
+};
+
+export const CHAT_MODEL_CHATGPT4_VISION: IChatModel = {
+  apiId: API_ID_CHATGPT4_VISION,
+  name: CHAT_MODEL_NAME_CHATGPT4_VISION,
+  displayName: '4.0 - 视觉'
 };
diff --git a/src/operators/chat/models.ts b/src/operators/chat/models.ts
index 89d5848..9177cc9 100644
--- a/src/operators/chat/models.ts
+++ b/src/operators/chat/models.ts
@@ -2,6 +2,7 @@ import {
   CHAT_MODEL_NAME_CHATGPT,
   CHAT_MODEL_NAME_CHATGPT4,
   CHAT_MODEL_NAME_CHATGPT4_BROWSING,
+  CHAT_MODEL_NAME_CHATGPT4_VISION,
   CHAT_MODEL_NAME_CHATGPT_16K,
   CHAT_MODEL_NAME_CHATGPT_BROWSING,
   ROLE_ASSISTANT,
@@ -14,7 +15,8 @@ export type IChatModelName =
   | typeof CHAT_MODEL_NAME_CHATGPT4
   | typeof CHAT_MODEL_NAME_CHATGPT_16K
   | typeof CHAT_MODEL_NAME_CHATGPT_BROWSING
-  | typeof CHAT_MODEL_NAME_CHATGPT4_BROWSING;
+  | typeof CHAT_MODEL_NAME_CHATGPT4_BROWSING
+  | typeof CHAT_MODEL_NAME_CHATGPT4_VISION;
 
 export interface IChatModel {
   apiId: string;
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
index d81afca..d9a5639 100644
--- a/src/pages/chat/Conversation.vue
+++ b/src/pages/chat/Conversation.vue
@@ -245,7 +245,7 @@ export default defineComponent({
   }
   .bottom {
     width: 100%;
-    height: 70px;
+    height: 100px;
   }
 }
 </style>
diff --git a/src/plugins/font-awesome.ts b/src/plugins/font-awesome.ts
index dece080..62ff9b3 100644
--- a/src/plugins/font-awesome.ts
+++ b/src/plugins/font-awesome.ts
@@ -8,6 +8,8 @@ import {
   faClock as faRegularClock
 } from '@fortawesome/free-regular-svg-icons';
 import {
+  faLocationArrow as faSolidLocationArrow,
+  faPaperclip as faSolidPaperclip,
   faHashtag as faSolidHashtag,
   faCircleInfo as faSolidCircleInfo,
   faChevronLeft as faSolidChevronLeft,
@@ -38,10 +40,12 @@ import {
   faXmark as faSolidXmark
 } from '@fortawesome/free-solid-svg-icons';
 library.add(faRegularCopy);
+library.add(faSolidPaperclip);
 library.add(faSolidXmark);
 library.add(faSolidRotateRight);
 library.add(faSolidPenToSquare);
 library.add(faSolidCheck);
+library.add(faSolidLocationArrow);
 library.add(faRegularUser);
 library.add(faRegularSun);
 library.add(faSolidBolt);
diff --git a/src/store/chat/actions.ts b/src/store/chat/actions.ts
index c1d0e17..46c05c6 100644
--- a/src/store/chat/actions.ts
+++ b/src/store/chat/actions.ts
@@ -2,6 +2,7 @@ import {
   CHAT_MODEL_CHATGPT,
   CHAT_MODEL_CHATGPT4,
   CHAT_MODEL_CHATGPT4_BROWSING,
+  CHAT_MODEL_CHATGPT4_VISION,
   CHAT_MODEL_CHATGPT_16K,
   CHAT_MODEL_CHATGPT_BROWSING,
   IApplication,
@@ -36,7 +37,7 @@ export const setConversation = async ({ commit, state }: any, payload: IChatConv
   if (index > -1) {
     conversations[index] = payload;
   } else {
-    conversations.push(payload);
+    conversations.unshift(payload);
   }
   commit('setConversations', conversations);
   log(setConversation, 'set conversation success', conversations);
@@ -55,7 +56,8 @@ export const getApplications = async ({
       CHAT_MODEL_CHATGPT_16K.apiId,
       CHAT_MODEL_CHATGPT_BROWSING.apiId,
       CHAT_MODEL_CHATGPT4.apiId,
-      CHAT_MODEL_CHATGPT4_BROWSING.apiId
+      CHAT_MODEL_CHATGPT4_BROWSING.apiId,
+      CHAT_MODEL_CHATGPT4_VISION.apiId
     ]
   });
   log(getApplications, 'get application for chat success', applications);
@@ -78,7 +80,7 @@ export const getConversations = async ({
     // @ts-ignore
     application_id: state.applications?.map((application) => application.id),
     offset: 0,
-    limit: 30,
+    limit: 50,
     ordering: '-created_at'
   });
   log(getConversations, 'get api usages success', apiUsages);