diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index b76af6b24fe2f9093b8c06e79214c4bea3bc985b..6cce089a7abc774ad2534f748ee05e246a953f05 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -15,6 +15,7 @@ body[theme='dark'] {
   --o-flow-code-border: rgb(62,69,81);
   --flow-instance-hover-color: #1F2329;
   --flow-instance-shadow: 0 4px 16px 0 rgba(253, 254, 255, 0.1);
+  --flow-nodeBox-shadow: 0 8px 16px 0 rgba(253, 254, 255, 0.1);
   --flow-node-default-over-color: #25303E;
   --flow-node-boder-default-over: #314265;
   --flow-node-success-over-color: #1F312A;
@@ -38,6 +39,7 @@ body[theme='light'] {
   --o-flow-code-border: rgb(223,229,239);
   --flow-instance-hover-color: #FDFEFF;
   --flow-instance-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+  --flow-nodeBox-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
   --flow-node-default-over-color: #edf2fd;
   --flow-node-boder-default-over: #c7d6f5;
   --flow-node-success-over-color: #e6f6e9;
diff --git a/src/components/dialoguePanel/DialoguePanel.vue b/src/components/dialoguePanel/DialoguePanel.vue
index 0e56b5506e241e524362510be9be50d287148622..a7df31a5b238a4fbfdc141c3fa1b017e66f9bc3c 100644
--- a/src/components/dialoguePanel/DialoguePanel.vue
+++ b/src/components/dialoguePanel/DialoguePanel.vue
@@ -59,14 +59,16 @@ export interface DialoguePanelProps {
   echartsObj?:any;
   //
   test?:any;
-  //
+  //--时间-问题数-token
   metadata?:Metadata;
-  //
+  // -工作流的相关数据
   flowdata?:any;
-  //
+  // 缺少的参数列表-有可能
   paramsList?:any;
-  //
+  // 工作流调试用不到
   modeOptions:any;
+  // 新增是否是工作流调试的-用于修改调试抽屉样式
+  isWorkFlowDebug: boolean;
 }
 import JsonFormComponent from './JsonFormComponent.vue'
 import { Metadata } from "srcapis/paths/type";
@@ -425,7 +427,7 @@ const handleSendMessage = async (question, user_selected_flow, user_selected_app
 
 </script>
 <template>
-  <div class="dialogue-panel">
+  <div class="dialogue-panel" :class="{ workFlowDebugStyle: props.isWorkFlowDebug }">
     <div class="dialogue-panel__user" v-if="props.type === 'user'">
       <div class="dialogue-panel__user-time" v-if="createdAt">
         {{ dayjs(createdAt * 1000).format("YYYY-MM-DD HH:mm:ss") }}
@@ -435,7 +437,7 @@ const handleSendMessage = async (question, user_selected_flow, user_selected_app
       </div>
       <div class="dialogue-panel__content">
         <img v-if="avatar" :src="avatar" />
-        <div v-else>
+        <div v-else class="userArea">
           <img v-if="themeStore.theme === 'dark'" src="@/assets/images/dark_user.png" />
           <img v-else src="@/assets/images/light_user.png" />
         </div>
@@ -449,6 +451,7 @@ const handleSendMessage = async (question, user_selected_flow, user_selected_app
     <!-- AI回答 -->
     <div class="dialogue-panel__robot" v-else>
       <div class="dialogue-panel__robot-content">
+        <!-- 这里是flowData -->
       <DialogueFlow v-if="flowdata"  :flowdata="props.flowdata"/> 
       <div v-if="contentAfterMark" id="markdown-preview">
         <div v-html="contentAfterMark"></div>
@@ -1099,4 +1102,48 @@ const handleSendMessage = async (question, user_selected_flow, user_selected_app
     height: 20px;
   }
 }
+// 工作流调试抽屉样式--
+.workFlowDebugStyle {
+  width: auto;
+  padding-right: 24px;
+  .dialogue-panel__content {
+    gap: 16px;
+    .userArea {
+      min-width: 48px;
+      height: 48px;
+      img {
+        left: 0px;
+      }
+    }
+    .content {
+      margin-left: 0px;
+      min-height: 48px;
+    }
+  }
+  .dialogue-panel__user-time {
+    height: 20px;
+    line-height: 20px;    
+  }
+  .dialogue-panel__robot {
+    gap: 16px;
+    padding-left: 64px;
+    .dialogue-panel__robot-content {
+      border-radius: 8px;
+      // 调试抽屉中echarts无需显示
+      .answer_img {
+        display: none;
+      }
+      .loading-echarts {
+        display: none;
+      }
+      &::before {
+        left: 0;
+      }
+    }
+  }
+  // 调试抽屉中不需要显示底部反对等功能图标
+  .dialogue-panel__robot-bottom {
+    display: none;
+  }
+}
 </style>
diff --git a/src/views/app/index.vue b/src/views/app/index.vue
index 241d585e76f3639ee4f9152215bdebfcb0a7351e..a0215ee67f860b7ccf1d9c7f9ae162ab77884741 100644
--- a/src/views/app/index.vue
+++ b/src/views/app/index.vue
@@ -53,7 +53,7 @@
                   <div class="appCenterCardContentTitle">{{ appItem.name }}</div>
                   <div
                     class="appCenterCardContentCollect"
-                    :class="appItem.published ? '' : 'noClick'"
+                    :class="!appItem.published && appType === 'createdByMe' ? 'noClick' : ''"
                     @click.stop="handleFavorite($event, appItem)"
                   >
                     <IconFavorite v-if="appItem.favorited" class="appFavorite" />
@@ -72,7 +72,7 @@
                 <el-button text @click="handleDelApp($event, appItem)">删除</el-button>
               </div>
             </div>
-            <div class="unPublishSymbol" v-if="!appItem.published">
+            <div class="unPublishSymbol" v-if="!appItem.published && appType === 'createdByMe'">
               <div class="coverIcon"></div>
               <div class="textDesc">未发布</div>
             </div>
@@ -162,13 +162,13 @@ const handleQueryAppList = (payload?: any) => {
     .then(res => {
       appList.value = res[1]?.result.applications;
       currentPage.value = res[1]?.result.currentPage;
-      totalCount.value = res[1]?.result.total;
+      totalCount.value = res[1]?.result.totalApps;
     });
 };
 
 const handleFavorite = (e, item) => {
   // 未发布的不可收藏
-  if (!item.published) {
+  if (!item.published && appType.value === 'createdByMe') {
     return;
   }
   e.stopPropagation();
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 4e30f6cb0d8897844320c013818b87b1c985b0da..6f185433d047872b3a6b49f6d96985dfdbcc225b 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -57,7 +57,6 @@ const hanleAsideVisible = () => {
 const {
   onConnect,
   updateNode,
-  updateEdgeData,
   addEdges,
   getNodes,
   getEdges,
@@ -65,13 +64,12 @@ const {
   removeNodes,
   setViewport,
   getViewport,
-  fitView,
   setNodes,
   setEdges,
 } = useVueFlow();
 const { layout } = useLayout();
 
-const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } = useDragAndDrop();
+const { onDragOver, onDrop, onDragLeave, onDragStart } = useDragAndDrop();
 // 这里是初始化的开始结束的节点
 const initNodes = ref([
   {
@@ -101,67 +99,6 @@ const initNodes = ref([
 ]);
 // 开始的边默认为空数组【当然回显时应该有值】
 const edges = ref([]);
-// 下方为死数据--之后有接口请将其替换为接口
-const nodeStancesList = ref([
-  {
-    id: '11',
-    type: 'custom',
-    mark: 'iiiiii',
-    data: {
-      label: '知识库(成功节点)',
-      desc: '这里是知识库说明',
-      status: 'success',
-    },
-  },
-  {
-    id: '12',
-    type: 'custom',
-    mark: 'iiiiii',
-    data: {
-      label: 'LLM(失败节点)',
-      desc: '调用大模型，生成自然语言报告',
-      status: 'error',
-    },
-  },
-  {
-    id: '13',
-    type: 'custom',
-    mark: 'iiiiii',
-    data: {
-      label: '条件(正常初始化节点)',
-      desc: '条件说明',
-    },
-  },
-  {
-    id: '14',
-    type: 'branch',
-    mark: 'iiiiii',
-    data: {
-      label: 'LLM(分支节点)',
-      desc: '调用大模型，生成自然语言报告',
-    },
-  },
-  {
-    id: '15',
-    type: 'branch',
-    mark: 'iiiiii',
-    data: {
-      label: 'LLM(分支节点-成功状态)',
-      desc: '调用大模型，生成自然语言报告',
-      status: 'success',
-    },
-  },
-  {
-    id: '16',
-    type: 'branch',
-    mark: 'iiiiii',
-    data: {
-      label: 'LLM(分支节点-失败状态)',
-      desc: '调用大模型，生成自然语言报告',
-      status: 'error',
-    },
-  },
-]);
 
 const handleChangeZoom = zoomValue => {
   setViewport({
@@ -296,26 +233,6 @@ const dropFunc = e => {
   nodeAndLineConnection();
 };
 
-// 更新节点状态--这里是测试第一个成功节点改变状态的方法【同时边也随之改变】
-const updateNodeTest = state => {
-  // 获取当前的success状态的
-  const nodes = getNodes.value.filter(item => item.data.status === 'success');
-  const id = nodes[0].id;
-  const data = nodes[0].data;
-  // 取第一个，状态改为error
-  updateNode(id, { data: { ...data, status: 'error' } });
-  // 遍历获取以当前节点为起源节点的边和为目的节点的边
-  const changeSourceEdges = [...getEdges.value.filter(item => item.source === id)];
-  const changeTargetEdges = [...getEdges.value.filter(item => item.target === id)];
-  // 分别遍历相应的边-并更新它们的状态为最新状态
-  changeSourceEdges.forEach(item => {
-    updateEdgeData(item.id, { sourceStatus: 'error' });
-  });
-  changeTargetEdges.forEach(item => {
-    updateEdgeData(item.id, { targetStatus: 'error' });
-  });
-};
-
 onMounted(() => {
   api
     .queryAllFlowService({
@@ -345,13 +262,6 @@ const handleDebugDialogOps = visible => {
   debugDialogVisible.value = visible;
 };
 
-const handleDemo = () => {
-  return {
-    nodes: getNodes.value,
-    edges: getEdges.value,
-  };
-};
-
 const edgesChange = edges => {
   if (edges?.[0]?.type === 'remove' && edges[0]?.source) {
     updateConnectNodeHandle(edges[0].source, edges[0]?.sourceHandle, true);
@@ -382,6 +292,7 @@ const getCreatedFlow = createdFlowObj => {
   if (flowObj) {
     flowObj.value = { ...createdFlowObj };
     workFlowItemName.value = createdFlowObj.name;
+    // 回显工作流节点和边
     redrageFlow(createdFlowObj?.nodes, createdFlowObj?.edges);
   }
   // 更新当前应用下的工作流列表下拉框
@@ -454,6 +365,7 @@ const choiceFlowId = flowItem => {
   editFlow(flowItem);
 };
 
+// 回显工作流节点和边
 const redrageFlow = (nodesList, edgesList) => {
   const newNodeList = nodesList.map(node => {
     let newNode = {
@@ -467,6 +379,7 @@ const redrageFlow = (nodesList, edgesList) => {
       position: node.position,
       deletable: true,
     };
+    // 这里节点/handle的类型要根据返回的类型转换下
     if (node.type === 'start' || node.type === 'end') {
       newNode.data = {
         ...newNode.data,
@@ -483,7 +396,7 @@ const redrageFlow = (nodesList, edgesList) => {
     return newNode;
   });
   const newEdgeList = edgesList.map(edge => {
-    let newEdge = {
+    const newEdge = {
       id: edge.edgeId,
       source: edge.sourceNode,
       target: edge.targetNode,
@@ -573,7 +486,6 @@ const saveFlow = () => {
 };
 
 defineExpose({
-  handleDemo,
   saveFlow,
 });
 </script>
@@ -627,6 +539,7 @@ defineExpose({
       </transition>
     </aside>
     <div class="workFlowContainerRight">
+      <!-- vue-flow画布节点等区域 -->
       <VueFlow
         :nodes="nodes"
         :edges="edges"
@@ -675,7 +588,7 @@ defineExpose({
             :data="JSON.parse(JSON.stringify(props.data))"
           />
         </template>
-
+        <!-- 连接边线 -->
         <template #connection-line="props">
           <CustomEdge
             :sourceX="props.sourceX"
@@ -686,10 +599,11 @@ defineExpose({
             :targetPosition="props.targetPosition"
           />
         </template>
-
-        <WorkFlowDebug v-if="debugDialogVisible" :handleDebugDialogOps="handleDebugDialogOps" />
       </VueFlow>
+      <!-- vue-flow工作流的debug抽屉 -->
+      <WorkFlowDebug v-if="debugDialogVisible" :handleDebugDialogOps="handleDebugDialogOps" />
       <div class="workFlowOps" v-if="workFlowList.length">
+        <!-- 工作流画布左上方选择工作流以及调试按钮等区域 -->
         <div class="workFlowSelect">
           <el-select v-model="workFlowItemName" placeholder="请选择" :suffix-icon="IconCaretDown">
             <el-option
@@ -724,12 +638,14 @@ defineExpose({
         </div>
         <div class="debugStatus"></div>
       </div>
+      <!-- 暂无工作流展示 -->
       <div class="noWorkFlow" v-else>
         <div class="noFlow"></div>
         <div class="noFlowDesc">暂无工作流</div>
         <el-button type="primary" class="w96 addWorkFlow" @click="addWorkFlow">新建工作流</el-button>
       </div>
     </div>
+    <!-- 工作流新建弹窗 -->
     <WorkFlowDialog
       v-if="isAddWorkFlow"
       :editData="editData"
@@ -738,6 +654,7 @@ defineExpose({
       @createFlowId="getCreatedFlow"
     ></WorkFlowDialog>
   </div>
+  <!-- 节点yaml数据抽屉 -->
   <EditYamlDrawer
     v-if="isEditYaml"
     @closeDrawer="closeDrawer"
diff --git a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
index db3bdbd6b803d6e7b7baac8b82c4b2027ba2e0da..45722b452e7ecfeacd879aea4ed14a4fc1ce410d 100644
--- a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
@@ -79,6 +79,7 @@ watch(
     align-items: center;
     border-radius: 8px;
     justify-content: center;
+    background-color: var(--o-bg-color-base);
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
     transform: rotate(45deg);
     border: none;
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index fc3ab6bbff96de9221080d1199702210d85e1ab6..06303d16f7776cfdb417d8319aa8d0bbdd3550df 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -90,6 +90,7 @@ const closeDrawer = () => {
   padding: 0px;
   background-color: var(--o-bg-color-base);
   top: 48px;
+  width: 700px !important;
   height: calc(100% - 48px);
   .el-drawer__header {
     padding: 24px 24px 16px;
diff --git a/src/views/createapp/components/workFlowDebug.vue b/src/views/createapp/components/workFlowDebug.vue
index f77635e526a4bb1f0c181ecd5c702a1c844ebad9..8b24c873ac9fd9d166df73c3a6303ab54025e462 100644
--- a/src/views/createapp/components/workFlowDebug.vue
+++ b/src/views/createapp/components/workFlowDebug.vue
@@ -1,24 +1,143 @@
 <template>
   <div class="workFlowDebug">
     <div class="workFlowDebugClose">
+      <div class="title">调试</div>
       <div class="closeBtn" @click="handleCloseDebugDialog"><IconX /></div>
     </div>
     <div class="divider"></div>
     <div class="debugContent">
-
+      <div class="debugCheckArea">
+        <DialoguePanel
+          v-for="(item, index) in conversationList"
+          :cid="item.cid"
+          :key="index"
+          :type="item.belong"
+          :inputParams="item.params"
+          :content="item.message"
+          :is-finish="getItem(item, 'isFinish')"
+          :is-support="getItem(item, 'isSupport')"
+          :is-against="getItem(item, 'isAgainst')"
+          :metadata="getItem(item, 'metadata')"
+          :flowdata="getItem(item, 'flowdata')"
+          :created-at="item.createdAt"
+          :current-selected="item.currentInd"
+          :user-selected-app="user_selected_app"
+          :search_suggestions="getItem(item, 'search_suggestions')"
+          :paramsList="getItem(item, 'paramsList')"
+          :isWorkFlowDebug="true"
+          @commont="handleCommont"
+          @report="handleReport"
+          @handleSendMessage="handleSendMessage"
+          @clearSuggestion="clearSuggestion(index)"
+        />
+      </div>
+      <div class="inputDebugQuestion">
+        <!-- 输入框 -->
+        <div class="textareaInput">
+          <textarea
+            ref="inputRef"
+            :disabled="isCreateApp"
+            v-model="dialogueInput"
+            maxlength="2000"
+            :placeholder="$t('main.ask_me_anything')"
+            @keydown="handleKeydown"
+          />
+        </div>
+        <!-- 发送问题 -->
+        <div class="sendIcon">
+          <img v-if="isAnswerGenerating || dialogueInput.length <= 0" src="@/assets/images/send_disable.png" alt="" />
+          <div v-else @click="handleSendMessage(undefined, dialogueInput)">
+            <img v-if="themeStore.theme === 'dark'" src="@/assets/images/dark_send.png" alt="" />
+            <img v-else src="@/assets/images/light_send.png" alt="" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import '../../styles/workFlowDebug.scss';
-import { watch, ref } from 'vue';
+import { computed, watch, ref } from 'vue';
 import { IconX } from '@computing/opendesign-icons';
+import DialoguePanel from 'src/components/dialoguePanel/DialoguePanel.vue';
+import type { ConversationItem, RobotConversationItem } from 'src/views/dialogue/types';
+import { useSessionStore, useChangeThemeStore } from 'src/store';
+import { useHistorySessionStore } from 'src/store/historySession';
+import { successMsg, errorMsg } from 'src/components/Message';
+import { storeToRefs } from 'pinia';
+import { api } from 'src/apis';
+// 对话列表
+const { sendQuestion } = useSessionStore();
+const { conversationList, isAnswerGenerating } = storeToRefs(useSessionStore());
+const { user_selected_app } = storeToRefs(useHistorySessionStore());
+const { generateSession } = useHistorySessionStore();
+const { currentSelectedSession } = storeToRefs(useHistorySessionStore());
+const themeStore = useChangeThemeStore();
+export interface DialogueSession {
+  modeOptions: any;
+  isCreateApp: any;
+  createAppForm: any;
+}
 interface DebugProps {
-  handleDebugDialogOps:any
+  handleDebugDialogOps: any;
 }
+
 const props = defineProps<DebugProps>();
-const handleCloseDebugDialog = ()=>{
-  props.handleDebugDialogOps(false)
-}
- 
+
+// 对话输入内容
+const dialogueInput = ref<string>('');
+
+/**
+ *
+ * @param item
+ */
+const getItem = <T,>(item: ConversationItem, field: string): T | undefined => {
+  if (field in item) {
+    return (item as RobotConversationItem)[field] as T;
+  }
+  return undefined;
+};
+
+/**
+ * 发送消息
+ */
+const handleSendMessage = async (groupId: string | undefined, question: string, user_selected_flow?: string[]) => {
+  if (isAnswerGenerating.value) return;
+  const language = localStorage.getItem('localeLang') === 'CN' ? 'zh' : 'en';
+  const len = conversationList.value.length;
+  if (len > 0 && !(conversationList.value[len - 1] as RobotConversationItem).isFinish) return;
+  dialogueInput.value = '';
+
+  if (!currentSelectedSession.value) {
+    await generateSession();
+  }
+  if (user_selected_flow) {
+    await sendQuestion(groupId, question, user_selected_app.value, undefined, undefined, user_selected_flow, undefined);
+  } else {
+    await sendQuestion(groupId, question, user_selected_app.value, undefined, undefined, undefined, undefined);
+  }
+};
+
+const clearSuggestion = (index: number): void => {
+  if ('search_suggestions' in conversationList.value[index]) {
+    conversationList.value[index].search_suggestions = undefined;
+  }
+};
+
+/**
+ * 处理鼠标事件
+ * @param event
+ */
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    if (dialogueInput.value !== '') {
+      handleSendMessage(undefined, dialogueInput.value);
+    }
+  }
+};
+
+const handleCloseDebugDialog = () => {
+  props.handleDebugDialogOps(false);
+};
 </script>
diff --git a/src/views/createapp/index.vue b/src/views/createapp/index.vue
index ee4a056716b529eebb9f2de9e8ad20c015d60d31..ddebd392e0c969f2c59e1d65c7c95b1927d65b52 100644
--- a/src/views/createapp/index.vue
+++ b/src/views/createapp/index.vue
@@ -53,7 +53,6 @@ const getFlowList = flowDataList => {
 
 // 保存按钮
 const saveConfigOrFlow = () => {
-  console.log(createAppType.value, 'createAppType');
   if (createAppType.value === 'appConfig') {
     let appFormValue = appConfigRef.value.createAppForm;
     if (appFormValue) {
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index 97f61221f43941de7f363f304b815af1270094c1..45b9697cf80c91d3f4a8d6809dcad09a9ca11f6c 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -272,7 +272,7 @@
       padding: 16px 18px;
       display: flex;
       background-color: var(--o-bg-color-base);
-      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
+      box-shadow: var(--flow-nodeBox-shadow);
       flex-direction: column;
       gap: 8px;
       .title {
diff --git a/src/views/styles/workFlowDebug.scss b/src/views/styles/workFlowDebug.scss
index 3171656d0a77e70079ce3f8194606d4aa354ede9..e902d2ea4c9e765734ed9bd9d28db51064cef66e 100644
--- a/src/views/styles/workFlowDebug.scss
+++ b/src/views/styles/workFlowDebug.scss
@@ -3,36 +3,83 @@
   height: 100%;
   position: absolute;
   right: 0;
+  top: 0;
   background-position: -370px -320px;
   border-radius: 8px;
-  box-shadow: -16px 4px 16px 0px rgba(0,0,0,0.1);
+  box-shadow: -16px 4px 16px 0px rgba(0, 0, 0, 0.1);
   border-right: 1px solid white;
   display: flex;
   flex-direction: column;
-  padding: 16px 24px;
+  padding: 16px 0 16px 24px;
   z-index: 99999;
-  .workFlowDebugClose{
+  .workFlowDebugClose {
     display: flex;
-    justify-content: flex-end;
-    width: 100%;
     height: 32px;
+    min-height: 32px;
+    margin-right: 24px;
     align-items: center;
-    .closeBtn{
+    border-bottom: 1px solid #Dfe5ef;
+    .title {
+      flex: 1;
+      font-size: 14px;
+    }
+    .closeBtn {
       width: 16px;
       height: 16px;
       cursor: pointer;
     }
-   
   }
-  
-  .divider{
-    width: 100%;
+  .debugContent {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: calc(100% - 32px);
+    gap: 16px;
+    .debugCheckArea {
+      flex: 1;
+      overflow-y: auto;
+    }
+    .inputDebugQuestion {
+      height: 48px;
+      width: calc(100% - 80px);
+      margin-left: 56px;
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--o-bg-color-base);
+      background-color: var(--o-bg-color-base);
+      border-radius: 8px;
+      gap: 8px;
+      box-shadow: rgba(25,25,25,0.05);
+      .textareaInput{
+        flex: 1;
+        display: flex;
+        height: 48px;
+        textarea {
+          width: 100%;
+          border: none;
+          outline: none;
+          padding: 8px 16px;
+          height: 100%;
+          background-color: transparent;
+          color: var(--o-text-color-primary);
+        }
+      };
+      .sendIcon {
+        width: 48px;
+        height: 32px;
+        img {
+          width: 32px;
+        }
+      }
+    }
+  }
+
+  .divider {
+    width: calc(100% - 24px);
     height: 1px;
     background: var(--o-border-color-light);
   }
 }
-.workFlowDebug{
+.workFlowDebug {
   background-image: var(--o-bg-image);
 }
-
-