diff --git a/.env b/.env
index a93cbc0..5a29a43 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 # Glob API URL
 VITE_GLOB_API_URL=/api
 
-VITE_APP_API_BASE_URL=https://erpapi.fontree.cn
+VITE_APP_API_BASE_URL=http://114.218.158.24:9020
 https://erpapi.fontree.cn#正式
 http://114.218.158.24:9020#测试
 # Whether long replies are supported, which may result in higher API fees
diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index c8a8d1c..2f840a3 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -43,6 +43,7 @@ const wrapClass = computed(() => {
   return [
     'text-wrap',
     'min-w-[20px]',
+		'min-h-[31px]',
     'rounded-md',
     isMobile.value ? 'p-2' : 'px-3 py-2',
     props.inversion ? 'bg-[#dfd7f3]' : 'bg-[#f4f6f8]',
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
index 85adf34..270dbbb 100644
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -45,12 +45,7 @@ const options = computed(() => {
       label: t('chat.copy'),
       key: 'copyText',
       icon: iconRender({ icon: 'ri:file-copy-2-line' }),
-    }/* ,
-    {
-      label: t('common.delete'),
-      key: 'delete',
-      icon: iconRender({ icon: 'ri:delete-bin-line' }),
-    }, */
+    }
   ]
 
   if (!props.inversion) {
@@ -76,12 +71,6 @@ function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
       emit('delete')
   }
 }
-
-/* function handleRegenerate() {
-  messageRef.value?.scrollIntoView()
-  emit('regenerate')
-} */
-
 async function handleCopy() {
   try {
     await copyToClip(props.text || '')
diff --git a/src/views/chat/hooks/useScroll.ts b/src/views/chat/hooks/useScroll.ts
index c474021..9b6be4c 100644
--- a/src/views/chat/hooks/useScroll.ts
+++ b/src/views/chat/hooks/useScroll.ts
@@ -12,7 +12,6 @@ interface ScrollReturn {
 
 export function useScroll(): ScrollReturn {
   const scrollRef = ref<ScrollElement>(null)
-
   const scrollToBottom = async () => {
     await nextTick()
     if (scrollRef.value)
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index ab3c81f..f644841 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -1,36 +1,55 @@
-<script setup >
+<script setup>
 import {uploadFormData, uploadImg} from "@/api/api";
 import {Local} from "@/utils/storage/storage";
 import dayjs from "dayjs";
-import { computed, onMounted, onUnmounted, ref,watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { NAutoComplete, NButton, NInput, useDialog, useMessage } from 'naive-ui'
-import { AreaChartOutlined ,PlusOutlined } from '@ant-design/icons-vue';
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
+import {useRoute} from 'vue-router'
+import {NAutoComplete, NButton, NInput, useDialog, useMessage, NBackTop} from 'naive-ui'
+import {AreaChartOutlined, PlusOutlined} from '@ant-design/icons-vue';
 import html2canvas from 'html2canvas'
-import { Message } from './components'
-import { useScroll } from './hooks/useScroll'
-import { useChat } from './hooks/useChat'
-import { useUsingContext } from './hooks/useUsingContext'
+import {Message} from './components'
+import {useScroll} from './hooks/useScroll'
+import {useChat} from './hooks/useChat'
+import {useUsingContext} from './hooks/useUsingContext'
 import HeaderComponent from './components/Header/index.vue'
-import { HoverButton, SvgIcon } from '@/components/common'
-import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { useChatStore, usePromptStore } from '@/store'
-import { fetchChatAPIProcess } from '@/api'
-import { t } from '@/locales'
-import { UploadOutlined } from '@ant-design/icons-vue';
+import {HoverButton, SvgIcon} from '@/components/common'
+import {useBasicLayout} from '@/hooks/useBasicLayout'
+import {useChatStore, usePromptStore} from '@/store'
+import {fetchChatAPIProcess} from '@/api'
+import {t} from '@/locales'
+import {UploadOutlined} from '@ant-design/icons-vue';
 import {storeToRefs} from 'pinia'
-import { sessionDetailForSetup } from '@/store'
-const sessionDetailData=sessionDetailForSetup()
+import {sessionDetailForSetup} from '@/store'
+
+const sessionDetailData = sessionDetailForSetup()
 let controller = new AbortController()
-const { sessionDetail:dataSources ,currentListUuid,gptMode,isStop,isGPT4} = storeToRefs(sessionDetailData)
+const {
+	sessionDetail: dataSources,
+	currentListUuid,
+	gptMode,
+	isStop,
+	isGPT4
+} = storeToRefs(sessionDetailData)
 
 const dialog = useDialog()
 const ms = useMessage()
 const chatStore = useChatStore()
-const { isMobile } = useBasicLayout()
-const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
-const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
-const { usingContext, toggleUsingContext } = useUsingContext()
+const {isMobile} = useBasicLayout()
+const {
+	addChat,
+	updateChat,
+	updateChatSome,
+	getChatByUuidAndIndex
+} = useChat()
+const {
+	scrollRef,
+	scrollToBottom,
+	scrollToBottomIfAtBottom
+} = useScroll()
+const {
+	usingContext,
+	toggleUsingContext
+} = useUsingContext()
 const prompt = ref('')
 const loading = ref(false)
 const inputRef = ref(null)
@@ -39,472 +58,532 @@ const inputRef = ref(null)
 const promptStore = usePromptStore()
 
 // 使用storeToRefs，保证store修改后，联想部分能够重新渲染
-const { promptList: promptTemplate } = storeToRefs(promptStore)
+const {promptList: promptTemplate} = storeToRefs(promptStore)
 
 // 未知原因刷新页面，loading 状态不会重置，手动重置
 dataSources.value.forEach((item, index) => {
-  if (item.loading)
-    updateChatSome(+uuid, index, { loading: false })
+	if (item.loading) {
+		updateChatSome(+uuid, index, {loading: false})
+	}
 })
+
 function handleSubmit() {
-  dataSources.value.push({
-    dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
-    text: prompt.value,
-    inversion: true,
-    error: false,
-    fileList:fileList.value.map(x=>x.url),
-    loading:false
-  })
-  sendDataStream()
+	dataSources.value.push({
+		dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
+		text: prompt.value,
+		inversion: true,
+		error: false,
+		fileList: fileList.value.map(x => x.url),
+		loading: false
+	})
+	sendDataStream()
 }
+
 const API_URL = `${import.meta.env.VITE_APP_API_BASE_URL}/chat/completion`;
 
 const createParams = () => {
-  const messages = dataSources.value.map((x) => {
-    return {
-      content:(()=>{
-        if (gptMode.value==='gpt-4-vision-preview'){
-          return [{type: "text", text: x.text},...x.fileList.map((y)=>{
-            return {type: "image_url", image_url:y}
-          })]
-        }else {
-          return x.text
-        }
-      })(),
-      role: x.inversion ? 'user' : 'assistant'
-    }
-  });
-  return {
-    type:isFile.value?'custom':'',
-    listUuid: currentListUuid.value,
-    messages,
-    frequency_penalty: 0,
-    max_tokens: 1000,
-    model: gptMode.value,
-    presence_penalty: 0,
-    stream: true,
-    temperature: 1,
-    top_p: 1
-  };
+	const messages = dataSources.value.map((x) => {
+		return {
+			content: (() => {
+				if (gptMode.value === 'gpt-4-vision-preview') {
+					return [{
+						type: "text",
+						text: x.text
+					}, ...x.fileList.map((y) => {
+						return {
+							type: "image_url",
+							image_url: y
+						}
+					})]
+				} else {
+					return x.text
+				}
+			})(),
+			role: x.inversion ? 'user' : 'assistant'
+		}
+	});
+	return {
+		type: isFile.value ? 'custom' : '',
+		listUuid: currentListUuid.value,
+		messages,
+		frequency_penalty: 0,
+		max_tokens: 1000,
+		model: gptMode.value,
+		presence_penalty: 0,
+		stream: true,
+		temperature: 1,
+		top_p: 1
+	};
 };
 const handleResponseStream = async (reader) => {
-  const { done, value } = await reader.read();
-  if (!done) {
-    let decoded = new TextDecoder().decode(value);
-    let decodedArray = decoded.split("data: ");
-    decodedArray.forEach((decoded) => {
-      if (decoded !== "") {
-        if (decoded.trim() === "[DONE]") {
-          dataSources.value[dataSources.value.length - 1].loading=false
-          loading.value=false
-          return;
-        } else {
-          if (isStop.value){
-            loading.value=false
-            return;
-          }
-          loading.value=true
-          dataSources.value[dataSources.value.length - 1].loading=true
-          const response = JSON.parse(decoded).choices[0].delta.content
-              ? JSON.parse(decoded).choices[0].delta.content
-              : "";
-          dataSources.value[dataSources.value.length - 1].text += response;
-        }
-      }
-    });
-
-    await handleResponseStream(reader);
-  }
+	const {
+		done,
+		value
+	} = await reader.read();
+	if (!done) {
+		let decoded = new TextDecoder().decode(value);
+		let decodedArray = decoded.split("data: ");
+		for (const decoded of decodedArray) {
+			if (decoded !== "") {
+				if (decoded.trim() === "[DONE]") {
+					dataSources.value[dataSources.value.length - 1].loading = false
+					loading.value = false
+				} else {
+					if (isStop.value) {
+						dataSources.value[dataSources.value.length - 1].loading = false
+						loading.value = false
+						return;
+					}
+					loading.value = true
+					dataSources.value[dataSources.value.length - 1].loading = true
+					const response = JSON.parse(decoded).choices[0].delta.content
+						? JSON.parse(decoded).choices[0].delta.content
+						: "";
+					dataSources.value[dataSources.value.length - 1].text += response;
+				}
+			}
+		}
+		await handleResponseStream(reader);
+	}
 };
 const sendDataStream = async () => {
-    const params = createParams();
-  fileList.value=[]
-  prompt.value=''
-  isStop.value=false
-  dataSources.value.push({
-    dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
-    text: '思考中..',
-    inversion: false,
-    error: false,
-    loading:true
-  });
-  visible.value=false
-  try {
-    loading.value=true
-    const response = await fetch(API_URL, {
-      method: "POST",
-      timeout: 10000,
-      body: JSON.stringify(params),
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        Authorization: Local.get('token'),
-      },
-    });
-
-    const contentType = response.headers.get('Content-Type');
-    if (!contentType || !contentType.includes('application/json')) {
-      const reader = response.body.getReader();
-      dataSources.value[dataSources.value.length-1].text=''
-      await handleResponseStream(reader);
-    }
-  } catch (error) {
-    console.error('发生错误:', error);
-  }
+	const params = createParams();
+	fileList.value = []
+	prompt.value = ''
+	isStop.value = false
+	dataSources.value.push({
+		dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
+		text: '思考中..',
+		inversion: false,
+		error: false,
+		loading: true
+	});
+	visible.value = false
+	try {
+		loading.value = true
+		const response = await fetch(API_URL, {
+			method: "POST",
+			timeout: 10000,
+			body: JSON.stringify(params),
+			headers: {
+				"Content-Type": "application/json",
+				Accept: "application/json",
+				Authorization: Local.get('token'),
+			},
+		});
+
+		const contentType = response.headers.get('Content-Type');
+		if (!contentType || !contentType.includes('application/json')) {
+			const reader = response.body.getReader();
+			dataSources.value[dataSources.value.length - 1].text = ''
+			await handleResponseStream(reader);
+		}
+	} catch (error) {
+		console.error('发生错误:', error);
+	}
 };
+
 function handleExport() {
-  if (loading.value)
-    return
-
-  const d = dialog.warning({
-    title: t('chat.exportImage'),
-    content: t('chat.exportImageConfirm'),
-    positiveText: t('common.yes'),
-    negativeText: t('common.no'),
-    onPositiveClick: async () => {
-      try {
-        d.loading = true
-        const ele = document.getElementById('image-wrapper')
-        const canvas = await html2canvas(ele, {
-          useCORS: true,
-        })
-        const imgUrl = canvas.toDataURL('image/png')
-        const tempLink = document.createElement('a')
-        tempLink.style.display = 'none'
-        tempLink.href = imgUrl
-        tempLink.setAttribute('download', 'chat-shot.png')
-        if (typeof tempLink.download === 'undefined')
-          tempLink.setAttribute('target', '_blank')
-
-        document.body.appendChild(tempLink)
-        tempLink.click()
-        document.body.removeChild(tempLink)
-        window.URL.revokeObjectURL(imgUrl)
-        d.loading = false
-        ms.success(t('chat.exportSuccess'))
-        Promise.resolve()
-      }
-      catch (error) {
-        ms.error(t('chat.exportFailed'))
-      }
-      finally {
-        d.loading = false
-      }
-    },
-  })
+	if (loading.value) {
+		return
+	}
+
+	const d = dialog.warning({
+		title: t('chat.exportImage'),
+		content: t('chat.exportImageConfirm'),
+		positiveText: t('common.yes'),
+		negativeText: t('common.no'),
+		onPositiveClick: async () => {
+			try {
+				d.loading = true
+				const ele = document.getElementById('image-wrapper')
+				const canvas = await html2canvas(ele, {
+					useCORS: true,
+				})
+				const imgUrl = canvas.toDataURL('image/png')
+				const tempLink = document.createElement('a')
+				tempLink.style.display = 'none'
+				tempLink.href = imgUrl
+				tempLink.setAttribute('download', 'chat-shot.png')
+				if (typeof tempLink.download === 'undefined') {
+					tempLink.setAttribute('target', '_blank')
+				}
+
+				document.body.appendChild(tempLink)
+				tempLink.click()
+				document.body.removeChild(tempLink)
+				window.URL.revokeObjectURL(imgUrl)
+				d.loading = false
+				ms.success(t('chat.exportSuccess'))
+				Promise.resolve()
+			} catch (error) {
+				ms.error(t('chat.exportFailed'))
+			} finally {
+				d.loading = false
+			}
+		},
+	})
 }
 
 function handleDelete(index) {
-  if (loading.value)
-    return
-
-  dialog.warning({
-    title: t('chat.deleteMessage'),
-    content: t('chat.deleteMessageConfirm'),
-    positiveText: t('common.yes'),
-    negativeText: t('common.no'),
-    onPositiveClick: () => {
-      chatStore.deleteChatByUuid(+uuid, index)
-    },
-  })
+	if (loading.value) {
+		return
+	}
+
+	dialog.warning({
+		title: t('chat.deleteMessage'),
+		content: t('chat.deleteMessageConfirm'),
+		positiveText: t('common.yes'),
+		negativeText: t('common.no'),
+		onPositiveClick: () => {
+			chatStore.deleteChatByUuid(+uuid, index)
+		},
+	})
 }
 
 function handleClear() {
-  if (loading.value)
-    return
-
-  dialog.warning({
-    title: t('chat.clearChat'),
-    content: t('chat.clearChatConfirm'),
-    positiveText: t('common.yes'),
-    negativeText: t('common.no'),
-    onPositiveClick: () => {
-      chatStore.clearChatByUuid(+uuid)
-    },
-  })
+	if (loading.value) {
+		return
+	}
+
+	dialog.warning({
+		title: t('chat.clearChat'),
+		content: t('chat.clearChatConfirm'),
+		positiveText: t('common.yes'),
+		negativeText: t('common.no'),
+		onPositiveClick: () => {
+			chatStore.clearChatByUuid(+uuid)
+		},
+	})
 }
 
 function handleEnter(event) {
-  if (!isMobile.value) {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault()
-      handleSubmit()
-    }
-  }
-  else {
-    if (event.key === 'Enter' && event.ctrlKey) {
-      event.preventDefault()
-      handleSubmit()
-    }
-  }
+	if (!isMobile.value) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault()
+			handleSubmit()
+		}
+	} else {
+		if (event.key === 'Enter' && event.ctrlKey) {
+			event.preventDefault()
+			handleSubmit()
+		}
+	}
 }
-function handleStop() {
-  if (loading.value) {
-    loading.value = false
-    isStop.value=true
-  }
+
+function handleStop(item) {
+	if (loading.value) {
+		loading.value = false
+		isStop.value = true
+	}
 }
 
 // 可优化部分
 // 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
 // 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
 const searchOptions = computed(() => {
-  if (prompt.value.startsWith('/')) {
-    return promptTemplate.value.filter((item) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj) => {
-      return {
-        label: obj.value,
-        value: obj.value,
-      }
-    })
-  }
-  else {
-    return []
-  }
+	if (prompt.value.startsWith('/')) {
+		return promptTemplate.value.filter((item) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj) => {
+			return {
+				label: obj.value,
+				value: obj.value,
+			}
+		})
+	} else {
+		return []
+	}
 })
 
 // value反渲染key
 const renderOption = (option) => {
-  for (const i of promptTemplate.value) {
-    if (i.value === option.label)
-      return [i.key]
-  }
-  return []
+	for (const i of promptTemplate.value) {
+		if (i.value === option.label) {
+			return [i.key]
+		}
+	}
+	return []
 }
 
 const placeholder = computed(() => {
-  if (isMobile.value)
-    return t('chat.placeholderMobile')
-  return t('chat.placeholder')
+	if (isMobile.value) {
+		return t('chat.placeholderMobile')
+	}
+	return t('chat.placeholder')
 })
 
 const buttonDisabled = computed(() => {
-  return loading.value || !prompt.value || prompt.value.trim() === ''
+	return loading.value || !prompt.value || prompt.value.trim() === ''
 })
 
 const footerClass = computed(() => {
-  let classes = ['p-4']
-  if (isMobile.value)
-    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
-  return classes
+	let classes = ['p-4']
+	if (isMobile.value) {
+		classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
+	}
+	return classes
 })
 
 onMounted(() => {
 
-  scrollToBottom()
-  if (inputRef.value && !isMobile.value)
-    inputRef.value?.focus()
+	scrollToBottom()
+	if (inputRef.value && !isMobile.value) {
+		inputRef.value?.focus()
+	}
 })
-const fileList = ref([
-]);
+const fileList = ref([]);
 onUnmounted(() => {
-  if (loading.value)
-    controller.abort()
+	if (loading.value) {
+		controller.abort()
+	}
 })
+
 function getBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
-  });
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.readAsDataURL(file);
+		reader.onload = () => resolve(reader.result);
+		reader.onerror = error => reject(error);
+	});
 }
+
 const previewVisible = ref(false);
 const previewImage = ref('');
 const previewTitle = ref('');
 const handleCancel = () => {
-  previewVisible.value = false;
-  previewTitle.value = '';
+	previewVisible.value = false;
+	previewTitle.value = '';
 };
 const handlePreview = async (file) => {
-  if (!file.url && !file.preview) {
-    file.preview = (await getBase64(file.originFileObj))
-  }
-  previewImage.value = file.url || file.preview;
-  previewVisible.value = true;
-  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
+	if (!file.url && !file.preview) {
+		file.preview = (await getBase64(file.originFileObj))
+	}
+	previewImage.value = file.url || file.preview;
+	previewVisible.value = true;
+	previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
 };
 const value = ref('gpt-3.5-turbo');
-const visible=ref(false)
-const removeImg=(data)=>{
-  fileList.value.splice(fileList.value.findIndex(x=>x.url===data.url),1)
+const visible = ref(false)
+const removeImg = (data) => {
+	fileList.value.splice(fileList.value.findIndex(x => x.url === data.url), 1)
 }
-watch(gptMode,()=>{
-  currentListUuid.value=''
-  dataSources.value=[]
+watch(gptMode, () => {
+	currentListUuid.value = ''
+	dataSources.value = []
 })
-const visible1=ref(false)
-const fileList1=ref([])
-const isFile=ref(false)
-const upItemImage1= async (file)=>{
-  const data = {
-    file: file.file,
-  }
-const res=await  uploadFormData(data)
-if (res.code===0){
-  file.onSuccess()
-  dataSources.value=[...dataSources.value,...res.data.paragraph.flatMap(n=>[n,'']).map((x)=>{
-    return {
-      dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
-      text: x,
-      inversion: Boolean(x),
-      error: false,
-    }
-  })]
-  isFile.value=true
-  fileList1.value=[]
-  visible1.value=false
-  sendDataStream()
-}
+const visible1 = ref(false)
+const fileList1 = ref([])
+const isFile = ref(false)
+const upItemImage1 = async (file) => {
+	const data = {
+		file: file.file,
+	}
+	const res = await uploadFormData(data)
+	if (res.code === 0) {
+		file.onSuccess()
+		dataSources.value = [...dataSources.value, ...res.data.paragraph.flatMap(n => [n, '']).map((x) => {
+			return {
+				dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
+				text: x,
+				inversion: Boolean(x),
+				error: false,
+			}
+		})]
+		isFile.value = true
+		fileList1.value = []
+		visible1.value = false
+		sendDataStream()
+	}
 }
 
-const customRequest=async (file)=>{
- const res=await uploadImg({file:file.file,source:'approval'})
-  if (res.code===0){
-    file.onSuccess()
-    fileList.value.push({
-        url:res.data.ori_url
-    })
-  }
+const customRequest = async (file) => {
+	const res = await uploadImg({
+		file: file.file,
+		source: 'approval'
+	})
+	if (res.code === 0) {
+		file.onSuccess()
+		fileList.value.push({
+			url: res.data.ori_url
+		})
+	}
 }
 </script>
 <template>
-  <div class="flex flex-col w-full h-full">
-    <HeaderComponent
-      v-if="isMobile"
-      :using-context="usingContext"
-      @export="handleExport"
-      @handle-clear="handleClear"
-    />
-    <main class="flex-1 overflow-hidden">
-      <div id="scrollRef"   ref="scrollRef" class="h-full overflow-hidden overflow-y-auto" >
-        <div
-          id="image-wrapper"
-          class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
-
-          :class="[isMobile ? 'p-2' : 'p-4']"
-        >
-          <template v-if="!dataSources.length">
-            <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
-              <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
-              <span>当前没有会话哦</span>
-            </div>
-          </template>
-          <template v-else>
-            <div>
-              <Message
-                v-for="(item, index) of dataSources.filter(x=>x.text||x.fileList?.length>0)"
-                :key="index"
-                :date-time="item.dateTime"
-                :text="item.text"
-                :fileList="item.fileList"
-                :inversion="item.inversion"
-                :error="item.error"
-                :loading="item.loading"
-                @delete="handleDelete(index)"
-              />
-              <div class="sticky bottom-0 left-0 flex justify-center">
-                <NButton v-if="loading" type="warning" @click="handleStop">
-                  <template #icon>
-                    <SvgIcon icon="ri:stop-circle-line" />
-                  </template>
-                  停止响应
-                </NButton>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </main>
-    <footer :class="footerClass">
-      <div class="w-full max-w-screen-xl m-auto">
-        <div class="flex items-center justify-between space-x-2" style="flex-wrap: initial">
-          <a-popover  :open="visible1" trigger="click">
-            <template #content>
-              <div class="clearfix">
-                <a-upload
-                    :max-count="1"
-                    v-model:file-list="fileList1"
-                    name="file"
-                    :customRequest="upItemImage1"
-                >
-                  <a-button>
-                    <upload-outlined></upload-outlined>
-                    上传文件
-                  </a-button>
-                </a-upload>
-              </div>
-            </template>
-            <HoverButton @click="visible1=!visible1">
-            <span  class="text-xl text-[#4f555e] dark:text-white" style="display: flex;justify-content: center;align-items: center">
-            <SvgIcon icon="ri:upload-2-line" />
-            </span>
-            </HoverButton>
-          </a-popover>
-          <a-popover v-if="gptMode==='gpt-4-vision-preview'" :open="visible" trigger="click">
-            <template #content>
-              <div class="clearfix">
-                <a-upload
-                    :file-list="fileList"
-                    :customRequest="customRequest"
-                    list-type="picture-card"
-                    @preview="handlePreview"
-                    @remove="removeImg"
-                >
-                  <div>
-                    <plus-outlined />
-                    <div style="margin-top: 8px">上传</div>
-                  </div>
-                </a-upload>
-                <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
-                  <img alt="example" style="width: 100%" :src="previewImage" />
-                </a-modal>
-              </div>
-            </template>
-            <HoverButton @click="visible=!visible">
-            <span  class="text-xl text-[#4f555e] dark:text-white" style="display: flex;justify-content: center;align-items: center">
-             <AreaChartOutlined />
+	<div class="flex flex-col w-full h-full">
+		<HeaderComponent
+			v-if="isMobile"
+			:using-context="usingContext"
+			@export="handleExport"
+			@handle-clear="handleClear"
+		/>
+		<main class="flex-1 overflow-hidden">
+			<div class="shortcut-arrow">
+				<div class="top">
+					<n-button @click="scrollToBottom" type="primary" dashed circle>
+						<template #icon>
+							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+								<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+											d="M244 400L100 256l144-144"
+								></path>
+								<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
+											d="M120 256h292"
+								></path>
+							</svg>
+						</template>
+					</n-button>
+				</div>
+			</div>
+
+
+			<div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
+				<div
+					id="image-wrapper"
+					class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
+
+					:class="[isMobile ? 'p-2' : 'p-4']"
+				>
+					<template v-if="!dataSources.length">
+						<div class="flex items-center justify-center mt-4 text-center text-neutral-300">
+							<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl"/>
+							<span>当前没有会话哦</span>
+						</div>
+					</template>
+					<template v-else>
+						<div>
+							<Message
+								v-for="(item, index) of dataSources"
+								:key="index"
+								:date-time="item.dateTime"
+								:text="item.text"
+								:fileList="item.fileList"
+								:inversion="item.inversion"
+								:error="item.error"
+								:loading="item.loading"
+								@delete="handleDelete(index)"
+							/>
+							<div class="sticky bottom-0 left-0 flex justify-center">
+								<NButton v-if="loading" type="warning" @click="handleStop(item)">
+									<template #icon>
+										<SvgIcon icon="ri:stop-circle-line"/>
+									</template>
+									停止响应
+								</NButton>
+							</div>
+						</div>
+					</template>
+				</div>
+			</div>
+		</main>
+		<footer :class="footerClass">
+			<div class="w-full max-w-screen-xl m-auto">
+				<div class="flex items-center justify-between space-x-2" style="flex-wrap: initial">
+					<a-popover :open="visible1" trigger="click">
+						<template #content>
+							<div class="clearfix">
+								<a-upload
+									:max-count="1"
+									v-model:file-list="fileList1"
+									name="file"
+									:customRequest="upItemImage1"
+								>
+									<a-button>
+										<upload-outlined></upload-outlined>
+										上传文件
+									</a-button>
+								</a-upload>
+							</div>
+						</template>
+						<HoverButton @click="visible1=!visible1">
+            <span class="text-xl text-[#4f555e] dark:text-white"
+									style="display: flex;justify-content: center;align-items: center"
+						>
+            <SvgIcon icon="ri:upload-2-line"/>
             </span>
-            </HoverButton>
-          </a-popover>
-<!--          <HoverButton v-if="!isMobile" @click="handleClear">
-            <span class="text-xl text-[#4f555e] dark:text-white">
-              <SvgIcon icon="ri:delete-bin-line" />
+						</HoverButton>
+					</a-popover>
+					<a-popover v-if="gptMode==='gpt-4-vision-preview'" :open="visible" trigger="click">
+						<template #content>
+							<div class="clearfix">
+								<a-upload
+									:file-list="fileList"
+									:customRequest="customRequest"
+									list-type="picture-card"
+									@preview="handlePreview"
+									@remove="removeImg"
+								>
+									<div>
+										<plus-outlined/>
+										<div style="margin-top: 8px">上传</div>
+									</div>
+								</a-upload>
+								<a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
+									<img alt="example" style="width: 100%" :src="previewImage"/>
+								</a-modal>
+							</div>
+						</template>
+						<HoverButton @click="visible=!visible">
+            <span class="text-xl text-[#4f555e] dark:text-white"
+									style="display: flex;justify-content: center;align-items: center"
+						>
+             <AreaChartOutlined/>
             </span>
-          </HoverButton>-->
-          <HoverButton v-if="!isMobile" @click="handleExport">
+						</HoverButton>
+					</a-popover>
+					<!--          <HoverButton v-if="!isMobile" @click="handleClear">
+											<span class="text-xl text-[#4f555e] dark:text-white">
+												<SvgIcon icon="ri:delete-bin-line" />
+											</span>
+										</HoverButton>-->
+					<HoverButton v-if="!isMobile" @click="handleExport">
             <span class="text-xl text-[#4f555e] dark:text-white">
-              <SvgIcon icon="ri:download-2-line" />
-            </span>
-          </HoverButton>
-<!--          <HoverButton @click="toggleUsingContext">
-            <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
-              <SvgIcon icon="ri:chat-history-line" />
+              <SvgIcon icon="ri:download-2-line"/>
             </span>
-          </HoverButton>-->
-          <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
-            <template #default="{ handleInput, handleBlur, handleFocus }">
-              <NInput
-                ref="inputRef"
-                v-model:value="prompt"
-                type="textarea"
-                :placeholder="placeholder"
-                :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
-                @input="handleInput"
-                @focus="handleFocus"
-                @blur="handleBlur"
-                @keypress="handleEnter"
-              />
-            </template>
-          </NAutoComplete>
-          <NButton color="#8a2be2" type="primary"  :disabled="buttonDisabled" @click="handleSubmit">
-            <template #icon>
+					</HoverButton>
+					<!--          <HoverButton @click="toggleUsingContext">
+											<span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+												<SvgIcon icon="ri:chat-history-line" />
+											</span>
+										</HoverButton>-->
+					<NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
+						<template #default="{ handleInput, handleBlur, handleFocus }">
+							<NInput
+								ref="inputRef"
+								v-model:value="prompt"
+								type="textarea"
+								:placeholder="placeholder"
+								:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
+								@input="handleInput"
+								@focus="handleFocus"
+								@blur="handleBlur"
+								@keypress="handleEnter"
+							/>
+						</template>
+					</NAutoComplete>
+					<NButton color="#8a2be2" type="primary" :disabled="buttonDisabled" @click="handleSubmit">
+						<template #icon>
               <span class="dark:text-black">
-                <SvgIcon icon="ri:send-plane-fill" />
+                <SvgIcon icon="ri:send-plane-fill"/>
               </span>
-            </template>
-          </NButton>
-        </div>
-      </div>
-    </footer>
-  </div>
+						</template>
+					</NButton>
+				</div>
+			</div>
+		</footer>
+	</div>
 </template>
+<style lang="scss" scoped>
+.shortcut-arrow {
+	width: min-content;
+	height: min-content;
+	position: absolute;
+	z-index: 10;
+	left: 50%;
+	bottom: 90px;
+	.top {
+		transform: rotate(270deg) translateX(-50%);
+		width: min-content;
+		height: min-content;
+
+	}
+}
+</style>