diff --git a/package.json b/package.json
index 18a115daabd7c5429ec74c07226a79595e3392f8..83da512e7fb678dbb66f485d3ed877d0b96aecfb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "vuejs-with-vite",
-  "version": "0.0.0",
+  "name": "ai-rag",
+  "version": "1.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -11,13 +11,15 @@
     "axios": "^1.4.0",
     "fs": "^0.0.1-security",
     "guess": "^1.0.2",
-    "markdown-it-vue": "^1.1.7",
+    "highlight.js": "^11.9.0",
+    "marked": "^11.1.1",
     "npm": "^9.7.2",
     "tdesign-vue-next": "^1.3.9",
     "vue": "^3.2.37"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.10",
     "@vitejs/plugin-vue": "^3.0.1",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.33",
diff --git a/src/App.vue b/src/App.vue
index 53bb1756f646357e5388c1f667d4d9f1620d7016..27d926755e5f079a59f5f6d82118429513d155ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,7 +34,7 @@
       <div class="flex-auto bg-slate-300 md:bg-slate-300 p-2 sm:p-8" v-else>
 
         
-
+        
         <div class="w-full bg-slate-200 h-full m-auto relative container max-w-6xl rounded-xl">
           <div class="w-full h-full pb-24 p-4 overflow-y-auto overflow-x-hidden" ref="messageList">
             <div v-for="(item,index) in message" class="mb-8">
@@ -51,15 +51,13 @@
               <div v-else class="flex">
                 <t-image class="rounded-lg" v-if="config.robot_img" :src="config.robot_img" fit="cover"
                   :style="{ width: '40px', height: '40px' }"></t-image>
-                <div class="bg-slate-50 text-gray-700 p-4 mx-2 w-fit max-w-2xl 2xl:max-w-4xl rounded-lg text-wrapper">
+                <div class="bg-slate-50 text-gray-700 p-4 mx-2 w-fit max-w-2xl 2xl:max-w-4xl rounded-lg">
                   <template v-if="item?.viewMode??'chat' === 'image'">
                     <img v-if="item.img" :src="item.img"/>
                     <img v-else src="/loading.gif" class="w-[512px]"/>
                   </template>
                   <template v-else-if="item.message && item.message.length > 5">
-                    <p class="text-sm">
-                      {{ item.message }}
-                    </p>
+                    <markdown-preview :value="item.message" class="w-full"/>
                     <!-- <markdown-it-vue class="md-body" content="123" :options="mdOptions" :key="index" v-if="item.message"/> -->
 
                   </template>
@@ -84,7 +82,10 @@
           <div class="w-full absolute bottom-0 bg-slate-100 h-22 py-2 px-2 rounded flex flex-col  text-sm">
             
             <div class="w-full h-10 flex justify-between items-center gap-4">
-                <input v-model="prompt" class="flex-auto ring-0	outline-0	pl-2 bg-slate-200 h-10 border-0 text-sm text-gray-700" v-on:keyup.enter="query" placeholder="提示词" />
+                <form v-on:submit.prevent="query"  class="flex-auto">
+                  <input v-model="prompt" class="ring-0	outline-0	pl-2 bg-slate-200 h-10 border-0 text-sm text-gray-700  w-full"  placeholder="提示词"/>
+
+                </form>
 
                 <t-dropdown :options="options" @click="clickHandler" class="ml-4 mt-1" v-if="mode === 'draw'">
                   <t-button theme="default" variant="text" shape="square"> 
@@ -136,27 +137,21 @@ import OpenAI from './js/openai.js'
 import Config from './js/config.js'
 import InsCodeAI from './js/inscodeai.js'
 
-import SDApi from './js/sd.js'
+// import SDApi from './js/sd.js'
 import StorageApi from './js/storage.js'
-import PodsApi from './js/pod.js'
+// import PodsApi from './js/pod.js'
 import RepEs from './js/repEs.js'
 import { MessagePlugin } from 'tdesign-vue-next';
 
 import Content from './components/content/index.vue'
 
 
-// import MarkdownItVue from 'markdown-it-vue'
-// import 'markdown-it-vue/dist/markdown-it-vue.css'
-// https://github.com/ravenq/markdown-it-vue
-import MarkdownItVue from 'markdown-it-vue'
-import 'markdown-it-vue/dist/markdown-it-vue.css'
-
-// const DataServe = new Data()
+import markdownPreview from  './components/markdown-preview/index.vue'
 
 export default {
-  name: 'LlmApp',
+  name: 'AIRag',
   components: {
-    MarkdownItVue, Content
+    markdownPreview, Content
   },
   data() {
     return {
@@ -302,7 +297,10 @@ export default {
         this.prompt = ''
         messages.push({ "user": "User", "message": newPrompt })
         messages.push(currentMsg)
-        _this.$refs.messageList.scrollTop = _this.$refs.messageList.scrollHeight;
+        if (_this.$refs.messageList.scrollHeight) {
+          _this.$refs.messageList.scrollTop = _this.$refs.messageList.scrollHeight;
+
+        }
         
         if (this.indexClient) {
           this.indexClient.query(newPrompt).then(res => {
diff --git a/src/components/content/index.vue b/src/components/content/index.vue
index 7ecd729abf20c189e90d15c761eaa6f5fd31b78b..09d8c20af825bdca618bcacbf65a3dac3c2ae6b8 100644
--- a/src/components/content/index.vue
+++ b/src/components/content/index.vue
@@ -4,9 +4,9 @@
         <div class="p-4">
             
             <div class="flex items-center gap-4">
-                <textarea class="block w-full rounded text-sm text-gray-600 h-10" v-model="newContent" maxLength="512" placeholder="输入需要搜索或保存的内容"></textarea>
-                <button class="bg-gray-500  px-4 h-10 rounded hover:bg-gray-600  text-gray-50" @click="search"> search</button>
-                <button class="bg-blue-500  px-4 h-10 rounded hover:bg-blue-600 text-gray-200" @click="add">+add</button>
+                <textarea class="block w-full rounded text-sm text-gray-600 h-10 bg-slate-100" v-model="newContent" maxLength="512" placeholder="输入需要搜索或保存的内容"></textarea>
+                <button class="bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600  px-4 h-10 rounded-lg hover:bg-gray-600  text-gray-50 shadow-xl " @click="search"> search</button>
+                <button class="bg-blue-500  px-4 h-10 rounded-lg hover:bg-blue-600 text-gray-200 shadow-xl" @click="add">+add</button>
             </div>
             <!-- <span>添加内容</span>
             <textarea class="block my-2 w-full rounded" v-model="newContent" maxLength="512"></textarea>
@@ -33,14 +33,14 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="(item, index) in data.list" class="*:h-12 *:border-b *:border-slate-300 *:pl-2 *:hover:bg-gray-300">
+                        <tr v-for="(item, index) in data.list" class="*:h-16 *:border-b *:border-slate-300 *:pl-2 *:hover:bg-gray-300">
                             <td class="w-[80px]">{{ index + 1 }}</td>
                             <td>
-                                <textarea class="my-2 w-full bg-gray-100 max-h-48 border-gray-300 text-slate-600 text-sm" v-model="item.content" maxLength="512"></textarea>
+                                <textarea class="my-2 w-full bg-gray-100 h-32 max-h-64 border-gray-300 text-slate-600 text-sm" v-model="item.content" maxLength="512"></textarea>
                             </td>
                             <td class="*:py-1  *:px-4 *:rounded-md *:mr-2 *:text-gray-100 w-[160px]">
-                                <button  @click="deleteItem(item)" class="bg-orange-400 hover:bg-orange-500 sm:inline"> 删除</button>
-                                <button  @click="updateItem(item)" class="bg-blue-400 hover:bg-blue-500"> 更新</button>
+                                <button  @click="deleteItem(item)" class="bg-orange-800 hover:bg-orange-900 sm:inline"> 删除</button>
+                                <button  @click="updateItem(item)" class="bg-slate-700 hover:bg-slate-800"> 更新</button>
                             </td>
                         </tr>
                     </tbody>
diff --git a/src/components/markdown-preview/index.vue b/src/components/markdown-preview/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da99dbbbcfa22eec895ca924fef1e6c74beb2ade
--- /dev/null
+++ b/src/components/markdown-preview/index.vue
@@ -0,0 +1,154 @@
+<template>
+    <div v-html="html" class="w-full prose-sm" ></div>
+</template>
+<script>
+import { marked } from 'marked'
+import hljs from "highlight.js"
+import 'highlight.js/styles/foundation.css'
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  highlight: function (code) {
+            return hljs.highlightAuto(code).value;
+  },
+//   langPrefix: 'language-',
+  breaks: false,
+  gfm: true,
+  headerIds: true,
+  headerPrefix: '',
+  mangle: true,
+  pedantic: false,
+  sanitize: false,
+  silent: false,
+  smartLists: true,
+  smartypants: false,
+  xhtml: false,
+  tables: true
+})
+
+
+export default {
+    name: 'markdownPreview',
+    props: {
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            html: ''
+        }
+    },
+    watch: {
+        value(newVal, oldVal) {
+            this.html = this.getHtmlCode(newVal)
+        },
+    },
+    methods: {
+        show (content) {
+            this.html = this.getHtmlCode(content)
+        },
+        getHtmlCode (value) {
+            return marked(value).replace(/<pre>/g, "<pre class='hljs'>")
+        }
+    },
+    mounted () {
+        if (this.value) {
+            
+            this.html = this.getHtmlCode(this.value)
+        }
+    }
+
+}
+
+</script>
+<style>
+    .bread-div{
+    padding: .5rem;
+    border-bottom:1px solid #eee;
+    background-color: #e1f0ff;
+}
+.detailed-title{
+    font-size: 1.8rem;
+    text-align: center;
+    padding: 1rem;
+}
+.center{
+    text-align: center;
+}
+.detailed-content{
+    padding: 1.3rem;
+    font-size: 1rem;
+}
+pre{
+    display: block;
+    background-color:#f3f3f3;
+     padding: .5rem !important;
+     overflow-y: auto;
+     font-weight: 300;
+     font-family: Menlo, monospace;
+     border-radius: .3rem;
+}
+pre{
+    background-color: #283646 !important;
+}
+pre >code{
+    border:0px !important;
+    background-color: #283646 !important;
+    color:#FFF;
+ 
+}
+code {
+    display: inline-block ;
+    background-color:#f3f3f3;
+    border:1px solid #fdb9cc;
+    border-radius:3px;
+    font-size: 12px;
+    padding-left: 5px;
+    padding-right: 5px;
+    color:#4f4f4f;
+    margin: 0px 3px;
+ 
+}
+ 
+.title-anchor{
+    color:#888 !important;
+    padding:4px !important;
+    margin: 0rem !important;
+    height: auto !important;
+    line-height: 1.2rem !important;
+    font-size: .7rem !important;
+    border-bottom: 1px dashed #eee;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+.active{
+    color:rgb(30, 144, 255) !important;
+}
+.nav-title{
+    text-align: center;
+    color: #888;
+    border-bottom: 1px solid rgb(30, 144, 255);
+   
+}
+.article-menu{
+    font-size:12px;
+}
+iframe{
+    height: 34rem;
+}
+.detailed-content  img{
+    width: 100%;
+    border:1px solid #f3f3f3;
+}
+.title-level3{
+    display: none !important;
+}
+.ant-anchor-link-title{
+    font-size: 12px !important;
+}
+.ant-anchor-wrapper{
+    padding: 5px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/js/config.js b/src/js/config.js
index df16e4d9f8020eb85167eb6a9bb6c4cc79776538..9ec479aa139e2fd93b84526cfe4c3ccec203203c 100644
--- a/src/js/config.js
+++ b/src/js/config.js
@@ -4,6 +4,8 @@ const prompt_template = `
 1. 回答问题时，需要参考用户提供的相关信息；
 2. 回答问题内容尽量内容简洁、思路清晰易理解；
 3. 回答问题文字格式尽量美观；
+4. 系统内置了markdown引擎，你可以返回markdown格式内容
+5. 回答问题时，尽量分要点罗列，方便理解。比如：1. xxx 2. xxx 3. xxx
 
 以下为用户后续问题相关的内容：
 {context}
@@ -12,9 +14,9 @@ const prompt_template = `
 `
 
 // 欢迎语，用户打开时自动发送给用户
-const welcome_text = `欢迎使用私人知识库，知识库仅供测试，数据可能随时被删除，请不用存放重要数据。
-"知识库"页面用来管理内容，你可以导入样例数据快速体验，也可以添加自己的数据。
-注意：结果由AI生成，可能存在不符合实际的联想内容，请注意甄别!
+const welcome_text = `欢迎使用私人知识库，知识库仅供测试，数据可能随时被删除，请不用存放重要数据。  
+"知识库"页面用来管理内容，你可以导入样例数据快速体验，也可以添加自己的数据。  
+**注意：结果由AI生成，可能存在不符合实际的联想内容，请注意甄别!**
 `
 
 // 外部内容库，没有时指定为null,你也可以替换为自己的知识库
diff --git a/tailwind.config.js b/tailwind.config.js
index d2574d5d4f6010c4fdaf51768d57a62d9b7380f9..4bf4ca53af18734dbd0c7158725093d34cfea84b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
   ],
 }