diff --git a/src/apis/server.ts b/src/apis/server.ts
index 4d41086f829ede4abe9b3369f24d5843ecb5aa8f..544581b6f89eb35cc84ec77cd5bd046fbae7f068 100644
--- a/src/apis/server.ts
+++ b/src/apis/server.ts
@@ -63,6 +63,10 @@ server.interceptors.response.use(
     return Promise.resolve(response);
   },
   async (error: AxiosError) => {
+    //防止初始化时出现太多报错
+    if(error.config?.url === '/api/app/recent') {
+      return 
+    }
     ElMessage({
       showClose: true,
       message: error?.response?.data?.message || error.message,
diff --git a/src/views/dialogue/components/AppInitalPreview.vue b/src/views/dialogue/components/AppInitalPreview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02bc7b67bf10afd53839fcd9f4d9a9ea119d767f
--- /dev/null
+++ b/src/views/dialogue/components/AppInitalPreview.vue
@@ -0,0 +1,154 @@
+<template>
+  <InterPreview :create-app-form="createAppForm" />
+  <div class="sendbox-wrapper">
+    <div class="dialogue-conversation-bottom-sendbox">
+      <div class="dialogue-conversation-bottom-sendbox__textarea">
+        <textarea ref="inputRef" maxlength="2000" :placeholder="$t('main.ask_me_anything')" />
+      </div>
+      <div class="dialogue-conversation-bottom-sendbox__upload">
+        <el-tooltip placement="top" :content="$t('upload.upload_tip_text')" effect="light">
+          <div class="upload-wrapper">
+            <input ref="uploadButton" type="file" multiple src="@/assets/svgs/upload_light.svg" />
+            <img v-if="themeStore.theme === 'dark'" src="@/assets/svgs/upload_light.svg" />
+            <img v-else src="@/assets/svgs/upload_dark.svg" />
+          </div>
+        </el-tooltip>
+      </div>
+      <div class="dialogue-conversation-bottom-sendbox__icon">
+        <img src="@/assets/images/send_disable.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import InterPreview from './InterPreview.vue';
+import { useSessionStore, useChangeThemeStore } from 'src/store';
+const themeStore = useChangeThemeStore();
+interface InterPreProps {
+  createAppForm: any;
+}
+const props = withDefaults(defineProps<InterPreProps>(), {});
+const interPreviewInfo = ref();
+watch(
+  () => props.createAppForm,
+  (newValue, oldValue) => {
+    interPreviewInfo.value = props.createAppForm;
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+.sendbox-wrapper {
+  position: relative;
+  background-color: var(--o-bg-color-base);
+  border-radius: 8px;
+  bottom: 0px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin: 12px;
+}
+
+.dialogue-conversation-bottom-sendbox {
+  height: 120px;
+  padding: 16px;
+
+  .word-limit {
+    font-size: 12px;
+    display: block;
+    height: 30px;
+    line-height: 30px;
+    float: right;
+    text-align: center;
+    margin-right: 98px;
+    color: #8d98aa;
+
+    .red-word {
+      color: #e02020;
+    }
+  }
+
+  .send-button {
+    position: absolute;
+    font-size: 12px;
+    width: 80px;
+    height: 30px;
+    right: 48px;
+    bottom: 40px;
+    border-radius: 2px;
+  }
+
+  &__textarea {
+    height: 60%;
+    position: relative;
+
+    textarea {
+      width: 100%;
+      height: 100%;
+      border: none;
+      color: var(--o-text-color-primary);
+      font-size: 16px;
+      background-color: var(--o-bg-color-base);
+      font-family:
+        HarmonyOS_Sans_SC_Medium,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        Oxygen,
+        Ubuntu,
+        Cantarell,
+        'Open Sans',
+        'Helvetica Neue',
+        sans-serif;
+
+      &:focus {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: var(--o-text-color-tertiary);
+      }
+    }
+
+    textarea::-webkit-input-placeholder {
+      font-family: HarmonyOS_Sans_SC_Medium;
+    }
+  }
+
+  &__upload {
+    position: absolute;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+
+    .upload-wrapper {
+      position: relative;
+
+      input {
+        width: 32px;
+        height: 32px;
+        opacity: 0;
+      }
+
+      img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        background-color: transparent;
+      }
+
+      img:hover {
+        filter: invert(50%) sepia(66%) saturate(446%) hue-rotate(182deg) brightness(100%) contrast(103%);
+      }
+    }
+  }
+
+  &__icon {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/views/dialogue/components/DialogueAside.vue b/src/views/dialogue/components/DialogueAside.vue
index 5ad58898bb78e9982fda755e71c0df0c4368c675..420f5899d44992a7cb03093cf5d02cced20299e1 100644
--- a/src/views/dialogue/components/DialogueAside.vue
+++ b/src/views/dialogue/components/DialogueAside.vue
@@ -20,7 +20,6 @@ import { successMsg } from 'src/components/Message';
 import i18n from 'src/i18n';
 import appIcon from '@/assets/images/app.png'
 import { IconChevronUp } from '@computing/opendesign-icons';
-import { onMounted } from 'vue';
 const { user_selected_app } = storeToRefs(useHistorySessionStore());
 
 interface HistorySession {
@@ -217,12 +216,16 @@ const toggleCollapse = () => {
   isCollapsed.value = !isCollapsed.value;
 };
 
-const selectApp = id => {
+const selectApp = (id) => {
   if(selectedAppId.value === id) {
     selectedAppId.value = "";
+    user_selected_app.value = [''];
+    app.value.selectedAppId = '';
   }else{
     selectedAppId.value = id;
     user_selected_app.value =[id];
+    // app.value.appId = id;
+    app.value.selectedAppId = id;
   }
 };
 function ensureAppAtFirstPosition() {
@@ -241,24 +244,6 @@ function ensureAppAtFirstPosition() {
   user_selected_app.value = [app.value.appId];
 }
 
-onMounted(async() => {
-  //获取 top5 list 
-  // const [_, res] = await api.getTopFiveApp(5);
-  // if (res?.result) {
-  //   appList.value = res.result.applications;
-  //   apps.value = res.result.applications;
-  // }
-  // // if(_ && res){
-  // //   appList.value = res.result.applications;
-  // //   apps.value = res.result.applications;
-  // // }
-  // // else {
-  // //   appList.value = apps.value;
-  // // }
-  // if(app.value.appId){
-  //   selectedAppId.value = app.value.appId;
-  // }
-});
 
 const getAppsValue = async () => {
 //获取 top5 list 
@@ -276,8 +261,8 @@ const [_, res] = await api.getTopFiveApp(5);
   // }
   if(app.value.appId){
     selectedAppId.value = app.value.appId;
+    app.value.selectedAppId = app.value.appId;
   }
-  
   ensureAppAtFirstPosition();
 }
 
@@ -290,6 +275,7 @@ watch(
     immediate: true,
   },
 );
+
 </script>
 
 <template>
@@ -311,12 +297,12 @@ watch(
           <transition name="collapse">
             <ul v-if="!isCollapsed" class="app-list">
               <li
-                v-for="app in displayedApps"
-                :key="app.id"
-                @click="selectApp(app.appId)"
-                :class="{ selected: selectedAppId === app.appId }"
+                v-for="apps in displayedApps"
+                :key="apps.appId"
+                @click="selectApp(apps.appId)"
+                :class="{ selected: selectedAppId === apps.appId }"
               >
-                <span>{{ app.name }}</span>
+                <span>{{ apps.name }}</span>
               </li>
             </ul>
           </transition>
diff --git a/src/views/dialogue/components/DialogueSession.vue b/src/views/dialogue/components/DialogueSession.vue
index 31b48dd4b705c8f924f39311d4ff759771fe83f4..1a059abe10f9f6aedcefec10ef6203634a58edad 100644
--- a/src/views/dialogue/components/DialogueSession.vue
+++ b/src/views/dialogue/components/DialogueSession.vue
@@ -24,18 +24,18 @@ export interface DialogueSession {
 }
 
 const props = withDefaults(defineProps<DialogueSession>(), {});
-// const props = withDefaults(defineProps<{
-//     createAppForm: any,
-// }>(), {});
+
 enum SupportMap {
   support = 1,
   against = 0,
 }
-// const dialogueRef = ref();
-const { pausedStream} = useSessionStore();
+const Form = ref(props.createAppForm);
+const AppForm = ref(props.createAppForm);
+const { pausedStream } = useSessionStore();
 const themeStore = useChangeThemeStore();
 const isCreateApp = ref(props?.isCreateApp);
 // const isCreateApp = ref(true);
+const { app } = storeToRefs(useSessionStore());
 const questions = [
   {
     groupId: 0,
@@ -578,16 +578,12 @@ const clearSuggestion = (index: number): void => {
 };
 
 onMounted(() => {
-  // 全局数据初始化
-  // getMode();
-  // isCreateApp.value = props.isCreateApp;
+  // 数据初始化
+  AppForm.value = props.createAppForm;
   if (!inputRef.value) return;
   inputRef.value.focus();
 });
 
-watch(() => props.createAppForm, () => {
-}, {deep: true, immediate: true})
-
 watch(selectMode, (newValue, oldValue) => {
   user_selected_app.value = [];
   let first = true;
@@ -642,7 +638,7 @@ watch(selectMode, (newValue, oldValue) => {
 });
 const selectQuestion = (val: any) => {
   dialogueInput.value = val;
-}
+};
 /**
  * 暂停和重新生成问答
  */
@@ -650,6 +646,59 @@ const handlePauseAndReGenerate = (cid?: number) => {
   // 停止生成handlePauseAndReGenerate
   pausedStream(cid);
 };
+
+const getappMode = (appId: string) => {
+  api
+    .querySingleAppData({
+      id: appId as string,
+    })
+    .then(res => {
+      const appInfo = res?.[1]?.result;
+      if (appInfo) {
+        Form.value = {
+          icon: appInfo?.icon,
+          name: appInfo?.name,
+          description: appInfo?.description,
+          links: appInfo?.links?.map(item => item.url),
+          recommendedQuestions: appInfo?.recommendedQuestions,
+          dialogRounds: appInfo?.dialogRounds,
+          permission: {
+            visibility: appInfo?.permission?.visibility,
+            authorizedUsers: appInfo?.permission?.authorizedUsers,
+          },
+        };
+      }
+    });
+};
+
+watch(
+  () => user_selected_app,
+  val => {
+    if (user_selected_app.value[0] && !isCreateApp.value) {
+      getappMode(user_selected_app.value[0]);
+    }
+    if (!isCreateApp.value) {
+      Form.value = props.createAppForm;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+watch(
+  () => isCreateApp,
+  val => {
+    if (isCreateApp.value === true) {
+      AppForm.value = props.createAppForm;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
 </script>
 
 <template>
@@ -685,12 +734,12 @@ const handlePauseAndReGenerate = (cid?: number) => {
           @handleSendMessage="handleSendMessage"
           @clearSuggestion="clearSuggestion(index)"
         />
-        <div v-if="conversationList.length === 0">
+        <div v-if="conversationList.length === 0 && (app.selectedAppId === '' || !app.selectedAppId)">
           <InitalPanel @selectQuestion="selectQuestion" />
         </div>
-      </div>
-      <div class="dialogue-interPreview-main" v-else>
-        <InterPreview :createAppForm="props.createAppForm" />
+        <div class="dialogue-interPreview-main" v-if="conversationList.length === 0 && app.selectedAppId !== ''">
+          <InterPreview :createAppForm="Form" />
+        </div>
       </div>
       <div class="createApp-demo"></div>
       <div class="dialogue-conversation-bottom">
@@ -706,27 +755,6 @@ const handlePauseAndReGenerate = (cid?: number) => {
             {{ $t('feedback.stop') }}
           </div>
         </div>
-        <!-- 识别方式 -->
-        <!-- <div class="recognitionMode" v-if="!isCreateApp">
-          <el-select
-            class="mode-select"
-            v-model="selectMode"
-            multiple
-            collapse-tags
-            filterable
-            allow-create
-            default-first-option
-            :placeholder="$t('main.query_interpretation')"
-          >
-            <el-option
-              v-for="item in modeOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-              :disabled="item.disabled"
-            />
-          </el-select>
-        </div> -->
         <div class="sendbox-wrapper">
           <!-- 输入框 -->
           <div class="dialogue-conversation-bottom-sendbox">
diff --git a/src/views/dialogue/components/InterPreview.vue b/src/views/dialogue/components/InterPreview.vue
index 5944c56846ccf965b09330e3d55cbc6c94eda06f..32014cf3db624d880d095244d118d93f2c1eb6d6 100644
--- a/src/views/dialogue/components/InterPreview.vue
+++ b/src/views/dialogue/components/InterPreview.vue
@@ -19,11 +19,11 @@
         >
           <div class="preMainContentTitle" v-if="interPreviewInfo.name.length">
             <div class="greetDes">
-              <div class="greetDesContent">你好，我是</div>
-              <div class="greetDesAppName greetDesContent">
+              <div class="greetDesContent">你好，我是
+              <p class="greetDesAppName greetDesContent">
                 {{ interPreviewInfo.name }}
-              </div>
-              <div class="greetDesContent">，很高兴为你服务</div>
+              </p>
+              ，很高兴为你服务</div>
             </div>
             <!-- <div class="preAppUser">
               <div>@zhang</div>
@@ -66,7 +66,6 @@
 <script setup lang="ts">
 import '../../styles/InterPreview.scss';
 import { ref, watch } from 'vue';
-import { IconUnfavorite } from '@computing/opendesign-icons';
 import TextMoreTootip from '@/components/textMoreTootip/index.vue';
 
 interface InterPreProps {
@@ -80,7 +79,6 @@ watch(
   () => props.createAppForm,
   (newValue, oldValue) => {
     interPreviewInfo.value = props.createAppForm;
-    console.log(props.createAppForm, 'props.createAppForm')
     connnectLinkList.value = props.createAppForm?.links?.filter(item => item.length);
     recommendQuestionList.value = props.createAppForm?.recommendedQuestions?.filter(item => item.length);
   },
@@ -90,3 +88,182 @@ watch(
   },
 );
 </script>
+<style lang="scss" scoped>
+.interPreviewBox {
+    display: flex;
+    flex: auto;
+    margin-top: 12px;
+    width: 100%;
+    gap: 32px;
+    flex-direction: column;
+    .preTop {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+
+      .preTopContent {
+        display: flex;
+        align-items: center;
+        height: 40px;
+        padding: 8px;
+        border-radius: 20px;
+        gap: 8px;
+        background: linear-gradient(122.39deg, rgba(109, 117, 250, 0.2) -20.158%, rgba(90, 179, 255, 0.2) 112.459%);
+        .preTitleIcon {
+          width: 32px;
+          height: 32px;
+        }
+        .preMainAppName {
+          font-size: 16px;
+          line-height: 24px;
+          color: var(--o-text-color-primary);
+          font-weight: 700;
+        }
+      }
+    }
+
+    .preMain {
+      padding-left: 40px;
+      display: flex;
+      gap: 16px;
+
+      .preMainImg {
+        width: 46px;
+        height: 46px;
+        border-radius: 50%;
+        .preMainAvator {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+      }
+      .preMainContanter {
+        width: calc(100% - 166px);
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        .preMainContent {
+          width: 100%;
+          padding: 24px;
+          background-color: var(--o-bg-color-base);
+          .preMainContentTitle {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            border-bottom: 1px solid var(--o-time-text);
+            .greetDes {
+              display: flex;
+              .greetDesContent {
+                font-size: 24px;
+                font-weight: 700;
+                line-height: 32px;
+                color: var(--o-text-color-primary);
+              }
+              .greetDesAppName {
+                display: inline-block;
+                color: #6c77fa;
+              }
+            }
+            .preAppUser {
+              display: flex;
+              gap: 16px;
+              margin-bottom: 8px;
+            }
+          }
+          .preMainContentDes {
+            font-size: 16px;
+            line-height: 24px;
+            margin-top: 8px;
+            margin-bottom: 20px;
+          }
+          .preMainContentLink {
+            .contentLinkTitle {
+              color: var(--o-text-color-primary);
+              font-size: 16px;
+              line-height: 24px;
+            }
+            .linkBadge {
+              .el-badge__content {
+                right: calc(-10px + var(--el-badge-size) / 2);
+                top: 4px;
+              }
+            }
+
+            .connectBox {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 8px;
+              flex-direction: column;
+              .connectCard {
+                display: flex;
+                height: 32px;
+                align-items: center;
+                background: rgba(99, 149, 253, 0.1);
+                padding: 0 8px 0 4px;
+                border-radius: 20px;
+                gap: 6px;
+                width: fit-content;
+                .connectBoxIndex {
+                  width: 24px;
+                  height: 24px;
+                  border-radius: 50%;
+                  text-align: center;
+                  line-height: 24px;
+                  font-size: 14px;
+                  color: var(--o-text-color-primary);
+                  background: var(--o-bg-color-base);
+                }
+                .connectBoxContent {
+                  display: block;
+                  color: #6395fd;
+                  font-size: 14px;
+                  cursor: pointer;
+                  font-weight: 400;
+                }
+              }
+            }
+          }
+        }
+        .preFooter {
+          width: 100%;
+          display: flex;
+          gap: 8px;
+          height: 32px;
+          align-items: center;
+          .preFooterTitle {
+            font-size: 12px;
+            line-height: 14px;
+            color: var(--o-text-color-secondary);
+          }
+          .preFooterContent {
+            display: flex;
+            gap: 8px;
+            .preFooterContentQues {
+              max-width: 150px;
+              border-radius: 8px;
+              padding: 8px 16px;
+              background-color: var(--o-bg-color-base);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .contentCollect {
+    width: 24px;
+    height: 24px;
+    background-color: var(--o-bg-color-light);
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      width: 16px;
+      height: 16px;
+      path {
+        fill: var(--o-text-color-tertiary);
+      }
+    }
+  }
+</style>
diff --git a/src/views/styles/createApp.scss b/src/views/styles/createApp.scss
index 3e03134da7e605c9ecaf406e2d35a6298127ab35..ab674fc61e9f0a624da6b4b593e4379484373369 100644
--- a/src/views/styles/createApp.scss
+++ b/src/views/styles/createApp.scss
@@ -112,6 +112,8 @@
   }
 
   .createAppContainerMainRight {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: calc(100% - 32px);
     background-image: var(--o-bg-image);