diff --git a/src/components/Upload/index.vue b/src/components/Upload/index.vue
index 41f12c1193580b21a55e303563af202fb9887f94..6c1bb4391e467217efc2e6bf78b14c5e6d5d7e81 100644
--- a/src/components/Upload/index.vue
+++ b/src/components/Upload/index.vue
@@ -6,7 +6,7 @@ import { IconUpload, IconVisible, IconDelete, IconCaretRight } from '@computing/
 import type { UploadFile, ElUploadProgressEvent, ElFile } from 'element-plus/es/components/upload/src/upload.type';
 import { Codemirror } from 'vue-codemirror';
 import { api } from 'src/apis';
-import { successMsg } from 'src/components/Message';
+import { errorMsg, successMsg } from 'src/components/Message';
 
 const handleCreateapi = () => {
   api
@@ -17,7 +17,10 @@ const handleCreateapi = () => {
     .then(res => {
       getServiceJson.value = res[1].result.apis;
       uploadtype.value = 'get';
-    });
+    }).catch(err=>{
+      errorMsg('解析失败');
+    })
+    ;
 };
 
 const props = defineProps({
diff --git a/src/store/conversation.ts b/src/store/conversation.ts
index c0aa626e8ee8ab97d1a0238f9af0fc3c3cfcc6ae..23d70620e23d7865fb518e7d86cffc23054192b6 100644
--- a/src/store/conversation.ts
+++ b/src/store/conversation.ts
@@ -233,7 +233,6 @@ export const useSessionStore = defineStore('conversation', () => {
           break;
         }
         const { done, value } = await reader.read();
-        console.log(value, 'value')
         const decodedValue = decoder.decode(value, { stream: true });
         const isLegal = judgeMessage(answerIndex, decodedValue);
         if (!isLegal) {
diff --git a/src/views/api/index.vue b/src/views/api/index.vue
index db1f53e9debc88770a60d724e71bae5b7b151cb6..934f969224817435f0dee2155553ccc4ea57e68b 100644
--- a/src/views/api/index.vue
+++ b/src/views/api/index.vue
@@ -90,7 +90,7 @@
         <Upload type="upload" @closeDrawer="handleClose" :serviceId="selectedServiceId" />
       </div>
       <div v-if="actions === 'get'">
-        <Upload type="get" @closeDrawer="handleClose" :serviceId="selectedServiceId" :getServiceJson="getServiceJson" />
+        <Upload type="get" @closeDrawer="handleClose"  :getServiceJson="getServiceJson" />
       </div>
       <div v-if="actions === 'edit'">
         <Upload type="edit" @closeDrawer="handleClose" :serviceId="selectedServiceId" :getServiceYaml="getServiceYaml"/>
diff --git a/src/views/app/index.vue b/src/views/app/index.vue
index 0c9b11a76939b28f8cd27642dcba3539f99e384c..826698d899a34b2ec7bb1513f4410ea1be188f78 100644
--- a/src/views/app/index.vue
+++ b/src/views/app/index.vue
@@ -145,7 +145,8 @@ const handleCreateApp = () => {
 
 const routerToDetail = appItem => {
   if (!appItem.published) {
-    return;
+    //调试时注释
+    // return;
   }
   //获取appItem.id & appItem.name
   router.push(`/copilot?appId=${appItem.appId}&name=${appItem.name}`);
diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue
index e791b7e5eee5573ff2e6bf69b54ff8c318f08a97..2eae57f1bf13f3c38cdebc9e35668f93928146db 100644
--- a/src/views/createapp/components/appConfig.vue
+++ b/src/views/createapp/components/appConfig.vue
@@ -8,6 +8,7 @@ import { useRoute } from 'vue-router';
 import { api } from 'src/apis';
 import { ElMessage } from 'element-plus';
 import { fa } from 'element-plus/es/locale';
+import AppInitalPreview from 'src/views/dialogue/components/AppInitalPreview.vue';
 const activeName = ref([1, 2, 3]);
 const activeNames = ref([1, 2, 3]);
 const route = useRoute();
@@ -358,7 +359,8 @@ defineExpose({
     <div class="previewTitle">界面预览</div>
     <div class="createAppContainerMainRight">
       <!-- 明天问下这里为什么写死一个true传参,---预览页面输入框禁用 -->
-      <DialogueSession :modeOptions="modeOptions" isCreateApp="true" :createAppForm="createAppForm" />
+      <!-- <DialogueSession :modeOptions="modeOptions" isCreateApp="true" :createAppForm="createAppForm" /> -->
+      <AppInitalPreview :createAppForm="createAppForm" />
     </div>
   </div>
 </template>
diff --git a/src/views/createapp/components/workFlowDebug.vue b/src/views/createapp/components/workFlowDebug.vue
index db54ce4cba3db1d2792f0d3c85a74a01cf083ff6..45ddab5f9753d16879016e3d5aa935932bc11334 100644
--- a/src/views/createapp/components/workFlowDebug.vue
+++ b/src/views/createapp/components/workFlowDebug.vue
@@ -112,7 +112,6 @@ const handleSendMessage = async (groupId: string | undefined, question: string,
   const len = conversationList.value.length;
   if (len > 0 && !(conversationList.value[len - 1] as RobotConversationItem).isFinish) return;
   dialogueInput.value = '';
-  // console.log(!currentSelectedSession.value, 'currentSelectedSession')
   if (!tmpConversationId.value) {
     const res = await generateSessionDebug({ debug: true });
     tmpConversationId.value = res || 1;
diff --git a/src/views/dialogue/Copilot.vue b/src/views/dialogue/Copilot.vue
index 2f612d67f03258ef74cd51475925ebd2772c2c84..628fead81dbaca53abfe23f7e0e6a674a71703c6 100644
--- a/src/views/dialogue/Copilot.vue
+++ b/src/views/dialogue/Copilot.vue
@@ -1,20 +1,13 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { ARGEEMENT_VERSION } from 'src/conf/version';
 import DialogueAside from './components/DialogueAside.vue';
 import DialogueSession from './components/DialogueSession.vue';
 import EulerDialog from 'src/components/EulerDialog.vue';
 import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
-import { storeToRefs } from 'pinia';
-import { useRouter, useRoute } from 'vue-router';
-import { useSessionStore, useAccountStore } from 'src/store';
+import { useAccountStore } from 'src/store';
 
-import { api } from 'src/apis';
-
-const router = useRouter();
-const route = useRoute();
 const { updateAgreement } = useAccountStore();
-const { app } = storeToRefs(useSessionStore());
 const dialogVisible = ref(false);
 const agreeDialogVisiable = ref(false);
 
@@ -43,38 +36,6 @@ const readAgreement = async () => {
   agreement.value = marked.parse(response.default) as string;
 };
 
-watch(
-  () => router,
-  () => {
-  const currRoute = router.currentRoute;
-  if (currRoute.value.query.appId) {
-    // 判断是否编辑--是否需要查询回显数据
-    api
-      .querySingleAppData({
-        id: route.query?.appId as string,
-      })
-      .then(res => {
-        const appInfo = res?.[1]?.result;
-        if (appInfo) {
-          createAppForm.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,
-            },
-          };
-        }
-      });
-    }
-  },
-  { deep: true, immediate: true },
-);
-
 /**
  * 处理服务协议是否显示
  * @param CheckedVersion
diff --git a/src/views/dialogue/components/AppInitalPreview.vue b/src/views/dialogue/components/AppInitalPreview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd3d37d235f02d84457a9245bdf20cb16cf17252
--- /dev/null
+++ b/src/views/dialogue/components/AppInitalPreview.vue
@@ -0,0 +1,24 @@
+<template>
+    <InterPreview :create-app-form="createAppForm" />
+</template>
+<script setup lang="ts">
+import '../../styles/InterPreview.scss';
+import { ref, watch } from 'vue';
+import InterPreview from './InterPreview.vue';
+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>
+  
\ No newline at end of file
diff --git a/src/views/dialogue/components/DialogueAside.vue b/src/views/dialogue/components/DialogueAside.vue
index 5ad58898bb78e9982fda755e71c0df0c4368c675..784b630261234181d38482fab9725007399e129c 100644
--- a/src/views/dialogue/components/DialogueAside.vue
+++ b/src/views/dialogue/components/DialogueAside.vue
@@ -21,6 +21,7 @@ import i18n from 'src/i18n';
 import appIcon from '@/assets/images/app.png'
 import { IconChevronUp } from '@computing/opendesign-icons';
 import { onMounted } from 'vue';
+import { appendFile } from 'fs';
 const { user_selected_app } = storeToRefs(useHistorySessionStore());
 
 interface HistorySession {
@@ -217,12 +218,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 +246,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 +263,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 +277,7 @@ watch(
     immediate: true,
   },
 );
+
 </script>
 
 <template>
@@ -311,12 +299,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..65438d3e6290533267d3f8fb2f25f48648b60e6f 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 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,
@@ -293,6 +293,8 @@ const isAllowToSend = computed(() => {
   return defaultStatus;
 });
 
+
+
 // 会话切换时
 watch(currentSelectedSession, async newVal => {
   if (!newVal) return;
@@ -578,16 +580,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;
@@ -650,6 +648,51 @@ 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 +728,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">
diff --git a/src/views/dialogue/components/InterPreview.vue b/src/views/dialogue/components/InterPreview.vue
index 5944c56846ccf965b09330e3d55cbc6c94eda06f..8ef4d284abba255edf2008ea693f6a5c7b316ce6 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;
+    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/dialogue/types.ts b/src/views/dialogue/types.ts
index b4dc5cbd22ae54741a70bc24676534d58c4f831e..86cdc4bba90db92ab81f312878fabd128d117cf9 100644
--- a/src/views/dialogue/types.ts
+++ b/src/views/dialogue/types.ts
@@ -80,6 +80,7 @@ export interface FlowDataType {
 export interface AppShowType {
   appId: string,
   name:string,
+  selectedAppId?:boolean,
 }
 
 
diff --git a/src/views/styles/InterPreview.scss b/src/views/styles/InterPreview.scss
index eb19e1daa5f43e9ca6269bd66dd3466f00c3666e..1fa22d979564745ad8cd4ae77f854b295afe5f56 100644
--- a/src/views/styles/InterPreview.scss
+++ b/src/views/styles/InterPreview.scss
@@ -3,6 +3,7 @@
   display: flex;
   margin-top: 32px;
   .interPreviewBox {
+    margin-top: 0px !important;
     display: flex;
     width: 100%;
     gap: 32px;
@@ -11,7 +12,6 @@
       width: 100%;
       display: flex;
       justify-content: center;
-
       .preTopContent {
         display: flex;
         align-items: center;