From 0827ff58099262da6366ba87407c7f476eed2de6 Mon Sep 17 00:00:00 2001
From: Hu Gang <18768366022@163.com>
Date: Mon, 19 May 2025 10:25:32 +0800
Subject: [PATCH] feat: create a pop-up window for an agent

---
 .../components/AssetLibraryDrawer.vue         | 208 +++++
 src/views/createapp/components/DebugApp.vue   | 797 ++++++++++++++++++
 src/views/createapp/components/McpDrawer.vue  | 187 ++++
 .../createapp/components/NewOrEditPrompt.vue  | 141 ++++
 .../components/PermissionControl.vue          | 191 +++++
 .../createapp/components/PromptDrawer.vue     | 275 ++++++
 6 files changed, 1799 insertions(+)
 create mode 100644 src/views/createapp/components/AssetLibraryDrawer.vue
 create mode 100644 src/views/createapp/components/DebugApp.vue
 create mode 100644 src/views/createapp/components/McpDrawer.vue
 create mode 100644 src/views/createapp/components/NewOrEditPrompt.vue
 create mode 100644 src/views/createapp/components/PermissionControl.vue
 create mode 100644 src/views/createapp/components/PromptDrawer.vue

diff --git a/src/views/createapp/components/AssetLibraryDrawer.vue b/src/views/createapp/components/AssetLibraryDrawer.vue
new file mode 100644
index 00000000..e2937ba5
--- /dev/null
+++ b/src/views/createapp/components/AssetLibraryDrawer.vue
@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import { CaretRight, Search } from '@element-plus/icons-vue';
+import { ref, onMounted } from 'vue';
+import { api } from '@/apis';
+import type { KnowledgeBase } from '@/apis/appCenter/knowledge';
+import { ElMessage } from 'element-plus';
+
+defineProps<{
+  visible: boolean;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+  (e: 'confirm', checkedKbList: KnowledgeBase[]): void;
+}>();
+
+const searchKeyword = ref();
+const tkbList = ref<
+  {
+    teamId: string;
+    teamName: string;
+    kbList: (KnowledgeBase & { isChecked: boolean })[];
+  }[]
+>([]);
+
+async function queryKbList() {
+  const [, res] = await api.getKnowledgeList(searchKeyword.value);
+  if (res) {
+    tkbList.value = res.result.team_kb_list.map((item) => ({
+      ...item,
+      kbList: item.kb_list.map((item) => ({
+        ...item,
+        isChecked: false,
+      })),
+    }));
+    activeCollapse.value = tkbList.value.map((item) => item.teamName);
+  }
+}
+
+const activeCollapse = ref<string[]>([]);
+
+function onConfirm() {
+  const checkedKbList = tkbList.value
+    .flatMap((item) => item.kbList)
+    .filter((item) => item.isChecked);
+  if (checkedKbList.length > 5) {
+    ElMessage.error('最多只能选择5个知识库');
+    return;
+  }
+  emits('confirm', checkedKbList);
+}
+
+onMounted(() => {
+  queryKbList();
+});
+</script>
+<template>
+  <div class="asset-drawer">
+    <el-drawer
+      size="700"
+      title="知识库"
+      :model-value="visible"
+      @close="emits('update:visible', false)"
+    >
+      <div class="wrapper">
+        <div class="search">
+          <el-input
+            v-model="searchKeyword"
+            type="search"
+            placeholder="搜索"
+            :suffix-icon="Search"
+          ></el-input>
+        </div>
+
+        <el-collapse v-model="activeCollapse">
+          <div v-for="item in tkbList" :key="item.teamId">
+            <el-collapse-item :name="item.teamName">
+              <template #title>
+                <el-icon
+                  class="collapse-icon"
+                  size="12"
+                  :class="{
+                    'collapse-icon-active': activeCollapse.includes(
+                      item.teamName,
+                    ),
+                  }"
+                >
+                  <CaretRight />
+                </el-icon>
+                <div class="collapse-title">{{ item.teamName }}</div>
+              </template>
+              <div class="asset-list">
+                <div
+                  class="asset-item"
+                  v-for="kb in item.kbList"
+                  :key="kb.kbId"
+                >
+                  <el-checkbox class="kb-checkbox" v-model="kb.isChecked" />
+                  <div class="kb-content">
+                    <p class="name">{{ kb.name }}</p>
+                    <p class="desc">{{ kb.description }}</p>
+                    <p class="id">ID: {{ kb.kbId }}</p>
+                  </div>
+                </div>
+              </div>
+            </el-collapse-item>
+          </div>
+        </el-collapse>
+      </div>
+
+      <template #footer>
+        <el-button @click="emits('update:visible', false)">关闭</el-button>
+        <el-button type="primary" @click="onConfirm">确认</el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+<style lang="scss" scoped>
+.asset-drawer {
+  :deep(.el-drawer) {
+    top: 48px;
+    height: calc(100vh - 48px);
+    .el-drawer__header {
+      color: #000;
+      font-weight: 700;
+      padding: 24px 24px 16px 24px;
+      margin: 0;
+    }
+    .el-drawer__body {
+      padding: 0 24px;
+    }
+    .el-drawer__footer {
+      padding: 0;
+      padding: 8px 24px;
+      box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .collapse-title {
+    margin-left: 6px;
+    height: 100%;
+    line-height: 24px;
+  }
+
+  .collapse-icon {
+    &-active {
+      transform: rotate(90deg);
+    }
+  }
+
+  .wrapper {
+    height: calc(100vh - 160px);
+    display: flex;
+    flex-direction: column;
+
+    .search {
+      .el-input > .el-input__wrapper {
+        --o-input-border-radius: 4px;
+      }
+
+      margin-bottom: 16px;
+    }
+    .asset-list {
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 8px;
+      overflow: scroll;
+      margin-top: 8px;
+
+      .asset-item {
+        display: flex;
+        align-items: start;
+        background-color: red;
+        padding: 11px 16px;
+        background-color: var(--el-collapse-header-bg);
+        border-radius: 4px;
+        gap: 5px;
+
+        .kb-content {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+          margin-top: 5px;
+
+          .desc {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .name {
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--o-text-color-primary);
+            max-width: 250px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/createapp/components/DebugApp.vue b/src/views/createapp/components/DebugApp.vue
new file mode 100644
index 00000000..94319b7f
--- /dev/null
+++ b/src/views/createapp/components/DebugApp.vue
@@ -0,0 +1,797 @@
+<script lang="ts" setup>
+import CommonFooter from '@/components/commonFooter/CommonFooter.vue';
+import Bubble from '@/components/bubble/index.vue';
+import {
+  useHistorySessionStore,
+  useLangStore,
+  useSessionStore,
+  useChangeThemeStore,
+} from '@/store';
+import { storeToRefs } from 'pinia';
+import { computed, h, onMounted, ref, watch } from 'vue';
+import { api } from '@/apis';
+import marked from '@/utils/marked';
+import userAvatar from '@/assets/svgs/dark_user.svg';
+import robotAvatar from '@/assets/svgs/robot.svg';
+import DefaultAgentIcon from '@/assets/svgs/default_agent_icon.svg';
+import SendDisabledIcon from '@/assets/svgs/send_disabled.svg';
+import SendEnableIcon from '@/assets/svgs/send_enabled.svg';
+import { fetchStream } from '@/utils/fetchStream';
+import { useScrollBottom } from '@/hooks/useScrollBottom';
+import dayjs from 'dayjs';
+import { useRoute } from 'vue-router';
+
+interface DebugConfig {
+  name: string;
+  description: string;
+  icon: string;
+  mcps: {
+    mcpserviceId: string;
+    name: string;
+    description: string;
+    icon: string;
+    author: string;
+    isActive?: boolean;
+  }[];
+  author?: string;
+  model?: string;
+}
+
+const props = defineProps<{
+  visible: boolean;
+  config: DebugConfig;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', status: boolean): void;
+  (e: 'success', status: boolean): void;
+}>();
+
+const route = useRoute();
+const { language } = storeToRefs(useLangStore());
+const { theme } = storeToRefs(useChangeThemeStore());
+const { currentSelectedSession, historySession } = storeToRefs(
+  useHistorySessionStore(),
+);
+
+const { generateSession, getHistorySession } = useHistorySessionStore();
+
+async function initDebugSession() {
+  const { conversationList } = useSessionStore();
+  if (conversationList.length === 0) return;
+  await generateSession();
+  await getHistorySession();
+  currentSelectedSession.value = historySession.value[0].conversationId;
+}
+
+async function deleteSession(id: string) {
+  const [, res] = await api.deleteSession({ conversationList: [id] });
+  if (res) {
+    conversations.value = [];
+  }
+}
+
+const dialogueInput = ref('');
+
+const markedContent = computed(
+  () => (text: string) => marked.parse(text) as string,
+);
+
+function renderMarkdown(text: string) {
+  return h('div', {
+    id: 'markdown-preview',
+    innerHTML: text,
+  });
+}
+
+const chatContainerRef = ref<HTMLElement | null>(null);
+const { scrollToBottom } = useScrollBottom(chatContainerRef, {
+  threshold: 15,
+});
+
+const { conversations, setConversations } = useConversations();
+
+const { isStreaming, queryStream, stopStream } = useStream();
+
+function useStream() {
+  const isStreaming = ref(false);
+
+  let controller: AbortController;
+
+  const queryStream = async (
+    q: string,
+    sessionId: string,
+    lang: 'zh' | 'en' = 'zh',
+    cId?: string,
+  ) => {
+    isStreaming.value = true;
+
+    const headers = {};
+    headers['Content-Type'] = 'application/json; charset=UTF-8';
+    const token = localStorage.getItem('ECSESSION');
+    if (token) headers['Authorization'] = `Bearer ${token}`;
+
+    controller = new AbortController();
+
+    const body = {
+      question: q,
+      conversationId: sessionId,
+      app: {
+        appId: route.query.appId as string,
+        flowId: '',
+        params: {},
+      },
+      language: lang,
+      features: {
+        context_num: 2,
+        max_tokens: 2048,
+      },
+    };
+    try {
+      const resp = await fetch('/api/chat', {
+        signal: controller.signal,
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers,
+      });
+      if (!resp.ok) {
+        isStreaming.value = false;
+        conversations.value.push({
+          id: '',
+          question: q,
+          answer: [
+            {
+              content: '系统错误，请稍后再试',
+            },
+          ],
+          answerIndex: 0,
+          role: 'assistant',
+        });
+        return;
+      }
+
+      emits('success', true);
+
+      for await (const chunk of fetchStream({
+        readableStream: resp.body!,
+      })) {
+        if (!chunk.data) {
+          break;
+        }
+        if (chunk.data.trim() === '[ERROR]') {
+          isStreaming.value = false;
+          const conversation =
+            conversations.value[conversations.value.length - 1];
+          conversation.answer[conversation.answerIndex].content =
+            '系统错误，请稍后再试';
+          break;
+        }
+        if (chunk.data.trim() === '[DONE]') {
+          isStreaming.value = false;
+          setTimeout(() => {
+            scrollToBottom(true);
+          }, 100);
+          break;
+        }
+        let conversation = conversations.value.find((item) => item.id === cId);
+
+        setConversations(chunk.data, q, conversation);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const stopStream = async () => {
+    const [, res] = await api.stopGeneration();
+    if (res) {
+      isStreaming.value = false;
+      controller.abort();
+      const conversation = conversations.value[conversations.value.length - 1];
+      if (conversation.answer[conversation.answerIndex].content === '') {
+        conversation.answer[conversation.answerIndex].content = '对话已终止';
+        return;
+      }
+      scrollToBottom(true);
+    }
+  };
+
+  return { isStreaming, queryStream, stopStream };
+}
+
+function useConversations() {
+  interface Conversation {
+    id: string;
+    question: string;
+    answer: {
+      content: string;
+      metadata?: StreamMetadata;
+    }[];
+    answerIndex: number;
+    role: 'user' | 'assistant';
+    createdAt?: Date | number;
+  }
+
+  type StreamEvent = 'text.add' | 'init' | 'input';
+  interface StreamMetadata {
+    inputTokens: number;
+
+    outputTokens: number;
+
+    timeCost: number;
+  }
+
+  interface StreamChunk {
+    content: {
+      text: string;
+    };
+    conversationId: string;
+    event: StreamEvent;
+    groupId: string;
+    id: string;
+    metadata: StreamMetadata;
+    taskId: string;
+  }
+
+  const conversations = ref<Conversation[]>([]);
+
+  const setConversations = (
+    data: string,
+    question: string,
+    conversation?: Conversation,
+  ) => {
+    const { id, event, content, metadata } = JSON.parse(data) as StreamChunk;
+
+    if (event === 'init') {
+      if (conversation) {
+        conversation.answer.push({
+          content: '',
+        });
+        conversation.answerIndex = conversation.answer.length - 1;
+      } else {
+        conversations.value.push({
+          id: id,
+          question,
+          answer: [
+            {
+              content: '',
+            },
+          ],
+          answerIndex: 0,
+          role: 'assistant',
+        });
+      }
+    }
+    if (event === 'text.add') {
+      const c = conversations.value[conversations.value.length - 1];
+      c.answer[c.answerIndex].content += content.text;
+      c.answer[c.answerIndex].metadata = metadata;
+    }
+    scrollToBottom();
+  };
+
+  return { conversations, setConversations };
+}
+
+function onSend(q: string) {
+  if (isStreaming.value) return;
+  conversations.value.push({
+    id: `user-${(conversations.value.length % 2) + 1}`,
+    question: q,
+    answer: [],
+    answerIndex: 0,
+    role: 'user',
+  });
+  scrollToBottom(true);
+  queryStream(q, currentSelectedSession.value, language.value as 'zh' | 'en');
+  dialogueInput.value = '';
+}
+
+/**
+ * 处理鼠标事件
+ * @param event
+ */
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    if (dialogueInput.value !== '') {
+      onSend(dialogueInput.value);
+    }
+  }
+};
+
+async function onRegenerateClick(id: string, question: string) {
+  queryStream(
+    question,
+    currentSelectedSession.value,
+    language.value as 'zh' | 'en',
+    id,
+  );
+}
+
+const bubbleStyles = computed(() => (role: 'user' | 'assistant') => {
+  if (role === 'user') {
+    return {
+      content: {
+        fontSize: '16px',
+        maxWidth: '1000px',
+        backgroundImage:
+          'linear-gradient(to right, rgba(109, 117, 250, 0.2), rgba(90, 179, 255, 0.2))',
+      },
+    };
+  } else if (role === 'assistant') {
+    return {
+      content: { width: '100%', maxWidth: '1000px', padding: '24px' },
+    };
+  }
+});
+
+watch(
+  () => props.visible,
+  () => {
+    if (!props.visible) {
+      deleteSession(currentSelectedSession.value);
+      return;
+    }
+    initDebugSession();
+  },
+);
+</script>
+<template>
+  <div class="debug-wrapper">
+    <el-dialog
+      class="mcp-debug-dialog"
+      :visible="visible"
+      :model-value="visible"
+      title="调试"
+      @close="emits('update:visible', false)"
+      align-center
+      destroy-on-close
+    >
+      <div class="debug-container">
+        <div class="debug-info">
+          <div class="app">
+            <img src="@/assets/svgs/myApp.svg" alt="" />
+            <div class="app-name">{{ config.name }}</div>
+          </div>
+
+          <div class="mcp-info" v-if="config.mcps.length">
+            <span>MCP 服务</span>
+            <div class="mcp-list">
+              <img
+                v-for="mcp in config.mcps"
+                :key="mcp.mcpserviceId"
+                :src="mcp.icon"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="chat-container" ref="chatContainerRef">
+          <div v-if="!conversations.length">
+            <Bubble
+              class="bubble-item"
+              :avatar="DefaultAgentIcon"
+              :styles="{
+                content: {
+                  width: '100%',
+                  maxWidth: '1000px',
+                  padding: '24px',
+                },
+              }"
+            >
+              <template #content>
+                <span class="custom-content">
+                  你好，我是
+                  <span class="gradient-text">{{ config.name }}</span>
+                  ，很高兴为您服务
+                </span>
+              </template>
+              <template #footer>
+                <div class="description">{{ config.description }}</div>
+              </template>
+            </Bubble>
+          </div>
+          <Bubble
+            v-else
+            v-for="(
+              { id, role, question, answer, answerIndex, createdAt }, idx
+            ) in conversations"
+            :key="id"
+            :avatar="role === 'user' ? userAvatar : robotAvatar"
+            :content="
+              role === 'assistant'
+                ? markedContent(answer[answerIndex].content)
+                : question
+            "
+            :content-render="role === 'assistant' ? renderMarkdown : undefined"
+            :date="
+              role === 'user'
+                ? dayjs(createdAt).format('YYYY-MM-DD HH:mm:ss')
+                : undefined
+            "
+            :loading="
+              role === 'assistant' &&
+              isStreaming &&
+              idx === conversations.length - 1
+            "
+            class="bubble-item"
+            :styles="bubbleStyles(role)"
+          >
+            <template
+              v-if="
+                (role === 'assistant' && !isStreaming) ||
+                (role === 'assistant' && idx !== conversations.length - 1)
+              "
+              #footer
+            >
+              <div class="bubble-footer">
+                <div class="action-toolbar">
+                  <div class="left">
+                    <div>
+                      tokens:
+                      {{ answer[answerIndex].metadata?.inputTokens || 0 }}↑ |
+                      {{ answer[answerIndex].metadata?.outputTokens || 0 }}↓ |
+                      {{
+                        answer[answerIndex].metadata?.timeCost
+                          ? Number(
+                              answer[answerIndex].metadata?.timeCost,
+                            ).toFixed(2)
+                          : '0.00'
+                      }}
+                    </div>
+
+                    <!-- <div class="pagination">
+                      <img
+                        class="pagination-arror mr-8"
+                        src="@/assets/svgs/arror_left.svg"
+                      />
+                      <span class="pagination-cur">{{ answerIndex + 1 }}</span>
+                      <span class="pagination-total">
+                        {{ `/${answer.length}` }}
+                      </span>
+                      <img
+                        class="pagination-arror ml-8"
+                        src="@/assets/svgs/arror_right.svg"
+                      />
+                    </div> -->
+
+                    <div
+                      class="regenerate"
+                      v-if="idx == conversations.length - 1"
+                      @click="onRegenerateClick(id, question)"
+                    >
+                      <img
+                        v-if="theme === 'dark'"
+                        src="@/assets/svgs/dark_regenerate.svg"
+                        alt=""
+                      />
+                      <img
+                        v-else
+                        src="@/assets/svgs/light_regenerate.svg"
+                        alt=""
+                      />
+                      <span>重新生成</span>
+                    </div>
+                  </div>
+                  <div class="button-group">
+                    <el-tooltip
+                      placement="top"
+                      :content="$t('feedback.copy')"
+                      effect="light"
+                    >
+                      <img src="@/assets/svgs/dark_copy.svg" />
+                    </el-tooltip>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </Bubble>
+        </div>
+
+        <div v-if="isStreaming" class="stop-button" @click="stopStream">
+          <img src="@/assets/svgs/light_stop_answer.svg" alt="" />
+          <div class="stop-button-answer">
+            {{ $t('feedback.stop') }}
+          </div>
+        </div>
+
+        <div class="sender">
+          <textarea
+            ref="inputRef"
+            v-model="dialogueInput"
+            maxlength="2000"
+            :placeholder="$t('main.ask_me_anything')"
+            @keydown="handleKeydown"
+          />
+          <div class="sender-button-group">
+            <div class="upload-button">
+              <img src="@/assets/svgs/upload_light.svg" alt="" />
+            </div>
+            <div class="sender-button">
+              <img
+                :src="isStreaming ? SendDisabledIcon : SendEnableIcon"
+                alt=""
+                @click="onSend(dialogueInput)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <footer class="copilot-footer">
+          <CommonFooter />
+        </footer>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="emits('update:visible', false)">
+            关闭
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+.debug-wrapper {
+  .debug-container {
+    position: relative;
+    height: 100%;
+    background-image: var(--o-bg-image);
+    overflow: auto;
+    border-radius: 8px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32px 40px 0 32px;
+
+    .debug-info {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+
+      .app {
+        display: flex;
+        align-items: center;
+        justify-content: 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%
+        );
+
+        img {
+          width: 32px;
+          height: 32px;
+        }
+
+        .app-name {
+          font-size: 16px;
+          margin-right: 8px;
+          line-height: 24px;
+          color: var(--o-text-color-primary);
+          font-weight: 700;
+        }
+      }
+
+      .mcp-info {
+        position: absolute;
+        right: 80px;
+        display: flex;
+        align-items: center;
+
+        .mcp-list {
+          margin-left: 7px;
+          display: flex;
+          gap: 8px;
+
+          img {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+
+    .chat-container {
+      width: 100%;
+      height: 340px;
+      overflow: auto;
+
+      .bubble-item {
+        margin-top: 24px;
+
+        .custom-content {
+          font-size: 24px;
+          font-weight: 700;
+
+          .gradient-text {
+            background: linear-gradient(
+              to right,
+              rgb(108, 119, 250),
+              rgb(90, 179, 255)
+            );
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+          }
+        }
+
+        .description {
+          border-top: 1px solid var(--o-border-color-light);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 16px 0 0 0;
+          margin-top: 20px;
+        }
+
+        .bubble-footer {
+          margin-top: 20px;
+          .action-toolbar {
+            border-top: 1px dashed var(--o-border-color-light);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px 0 0 0;
+
+            img {
+              width: 24px;
+              height: 24px;
+            }
+
+            .left {
+              font-size: 12px;
+              color: var(--o-text-color-tertiary);
+              display: flex;
+              gap: 8px;
+              align-items: center;
+
+              .regenerate {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+              }
+
+              .pagination {
+                display: flex;
+                img {
+                  width: 16px;
+                  height: 16px;
+                }
+
+                &-arror {
+                  margin: 0;
+                  cursor: pointer;
+                }
+                .ml-8 {
+                  margin-left: 8px;
+                }
+                .mr-8 {
+                  margin-right: 8px;
+                }
+              }
+            }
+
+            .button-group {
+              height: 24px;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
+
+    .stop-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 128px;
+      height: 40px;
+      border-radius: 8px;
+      border: 1px solid var(--o-text-color-primary);
+      margin-top: 24px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 16px;
+      cursor: pointer;
+      position: relative;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+
+      &-answer {
+        display: block;
+        font-size: 16px;
+        color: var(--o-text-color-primary);
+        line-height: 24px;
+      }
+    }
+
+    .sender {
+      position: absolute;
+      bottom: 36px;
+      width: 1000px;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      padding: 16px;
+      background-color: var(--o-bg-color-base);
+
+      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_Regular,
+          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);
+        }
+      }
+
+      .sender-button-group {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+
+        img {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .copilot-footer {
+      position: absolute;
+      bottom: 10px;
+    }
+  }
+
+  .el-button {
+    width: 64px;
+    height: 24px;
+    border-radius: 4px;
+  }
+}
+</style>
+<style>
+.mcp-debug-dialog {
+  width: 1256px;
+  height: 86%;
+  .el-dialog__body {
+    height: calc(100% - 110px);
+    max-height: none;
+  }
+}
+</style>
diff --git a/src/views/createapp/components/McpDrawer.vue b/src/views/createapp/components/McpDrawer.vue
new file mode 100644
index 00000000..a2820edb
--- /dev/null
+++ b/src/views/createapp/components/McpDrawer.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { Close, CirclePlus, Search } from '@element-plus/icons-vue';
+import { ref, onMounted, watch } from 'vue';
+import NewPrompt from './NewOrEditPrompt.vue';
+import { api } from '@/apis';
+import { ElMessage } from 'element-plus';
+
+export interface Mcp {
+  mcpserviceId: string;
+  icon: string;
+  name: string;
+  author: string;
+  description: string;
+}
+
+interface McpWithChecked extends Mcp {
+  isChecked: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    checkedList?: string[];
+  }>(),
+  {
+    visible: false,
+    checkedList: () => [],
+  },
+);
+
+const emits = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+  (e: 'confirm', mcpList: Mcp[]): void;
+}>();
+
+const mcpList = ref<McpWithChecked[]>([]);
+
+const searchKeyword = ref();
+
+/**
+ * 查询MCP服务
+ */
+async function queryMcpList() {
+  const [, res] = await api.getMcpList({
+    keyword: searchKeyword.value,
+  });
+  if (res) {
+    mcpList.value = res.result.services.map((item) => {
+      return {
+        ...item,
+        isChecked: false,
+      };
+    });
+  }
+}
+
+function onMcpItemClick(item: McpWithChecked) {
+  item.isChecked = !item.isChecked;
+}
+
+function onConfirm() {
+  const checkedMcpList = mcpList.value.filter((item) => item.isChecked);
+  if (checkedMcpList.length > 5) {
+    ElMessage.error('最多只能选择5个MCP服务');
+    return;
+  }
+  emits('confirm', checkedMcpList);
+}
+
+watch(
+  () => props.checkedList,
+  () => {
+    mcpList.value = mcpList.value.map((item) => {
+      return {
+        ...item,
+        isChecked: props.checkedList.includes(item.mcpserviceId),
+      };
+    });
+  },
+);
+
+onMounted(() => {
+  queryMcpList();
+});
+</script>
+<template>
+  <div class="prompt-drawer">
+    <el-drawer
+      size="700"
+      title="MCP服务"
+      :model-value="visible"
+      @close="emits('update:visible', false)"
+    >
+      <div class="wrapper">
+        <div class="search">
+          <el-input
+            v-model="searchKeyword"
+            type="search"
+            placeholder="搜索"
+            :suffix-icon="Search"
+            @change="queryMcpList"
+          ></el-input>
+        </div>
+
+        <div class="mcp-list">
+          <template v-for="item in mcpList" :key="item.id">
+            <div class="mcp-item" @click="onMcpItemClick(item)">
+              <el-checkbox v-model="item.isChecked" @click.stop />
+              <img :src="item.icon" alt="" />
+              <div>
+                <p>{{ item.name }}</p>
+                <p>{{ item.description }}</p>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <template #footer>
+        <el-button @click="emits('update:visible', false)">关闭</el-button>
+        <el-button type="primary" @click="onConfirm">确认</el-button>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+<style lang="scss" scoped>
+.prompt-drawer {
+  :deep(.el-drawer) {
+    top: 48px;
+    height: calc(100vh - 48px);
+    .el-drawer__header {
+      color: #000;
+      font-weight: 700;
+      padding: 24px 24px 16px 24px;
+      margin: 0;
+    }
+    .el-drawer__body {
+      padding: 0 24px;
+    }
+    .el-drawer__footer {
+      padding: 0;
+      padding: 8px 24px;
+      box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .wrapper {
+    height: calc(100vh - 160px);
+    display: flex;
+    flex-direction: column;
+
+    .mcp-list {
+      flex: 1;
+      overflow: scroll;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      display: flex;
+      flex-direction: column;
+      margin: 16px 0;
+      gap: 8px;
+      .mcp-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 16px;
+        background-color: var(--el-collapse-header-bg);
+        border-radius: 4px;
+        cursor: pointer;
+
+        p {
+          max-width: 550px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/createapp/components/NewOrEditPrompt.vue b/src/views/createapp/components/NewOrEditPrompt.vue
new file mode 100644
index 00000000..d7b2c82c
--- /dev/null
+++ b/src/views/createapp/components/NewOrEditPrompt.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import i18n from '@/i18n';
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { onMounted, reactive, ref, watch } from 'vue';
+import { Prompt } from '@/apis/appCenter';
+import { api } from '@/apis';
+
+const { t } = i18n.global;
+const props = defineProps<{
+  visible: boolean;
+  title: string;
+  prompt?: Prompt;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', status: boolean): void;
+}>();
+
+const form = ref({
+  name: '',
+  description: '',
+  prompt: '',
+});
+const formRef = ref<FormInstance>();
+
+const rules = reactive<FormRules<typeof form>>({
+  name: [{ required: true, message: '请输入提示词名称', trigger: 'blur' }],
+  description: [
+    { required: true, message: '请输入提示词简介', trigger: 'blur' },
+  ],
+  prompt: [{ required: true, message: '请选择提示词简介', trigger: 'blur' }],
+});
+
+async function onSubmit(formEl) {
+  if (!formEl) return;
+  await formEl.validate(async (valid) => {
+    if (!valid) return;
+    const [err, _] = await api.createOrUpdatePrompts({
+      ...form.value,
+    });
+    if (err) {
+      ElMessage.error(err.message);
+      return;
+    }
+    ElMessage.success('Success');
+    emits('update:visible', false);
+  });
+}
+
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (!newValue) {
+      form.value = { name: '', description: '', prompt: '' };
+    } else {
+      form.value = { ...form.value, ...props.prompt };
+    }
+  },
+);
+</script>
+<template>
+  <div class="new-prompt">
+    <el-dialog
+      :model-value="visible"
+      :title="title"
+      @close="emits('update:visible', false)"
+    >
+      <el-form ref="formRef" :model="form" :rules="rules">
+        <el-form-item label="提示词名称" prop="name">
+          <el-input
+            v-model="form.name"
+            placeholder="请输入提示词名称"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="提示词描述" prop="description">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :maxlength="200"
+            show-word-limit
+            :rows="5"
+            placeholder="请输入提示词描述"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="提示词简介" prop="prompt">
+          <el-input
+            v-model="form.prompt"
+            type="textarea"
+            :maxlength="200"
+            show-word-limit
+            :rows="15"
+            placeholder="请输入提示词简介"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" class="button" @click="onSubmit(formRef)">
+            {{ t('common.confirm') }}
+          </el-button>
+          <el-button class="button" @click="emits('update:visible', false)">
+            {{ t('common.cancel') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+.new-prompt {
+  .el-input > .el-input__wrapper {
+    --o-input-border-radius: 4px;
+  }
+  .el-textarea {
+    --o-textarea-border-radius: 4px;
+  }
+
+  :deep(.el-dialog) {
+    --o-dialog-width: 544px;
+
+    .el-dialog__body {
+      max-height: none;
+      padding-bottom: 5px;
+    }
+
+    .el-dialog__footer {
+      padding-top: 0;
+    }
+  }
+}
+.dialog-footer {
+  .button {
+    width: 64px;
+    height: 24px;
+    border-radius: 4px;
+  }
+}
+</style>
diff --git a/src/views/createapp/components/PermissionControl.vue b/src/views/createapp/components/PermissionControl.vue
new file mode 100644
index 00000000..2af773f6
--- /dev/null
+++ b/src/views/createapp/components/PermissionControl.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import { Search } from '@element-plus/icons-vue';
+import { computed, ref } from 'vue';
+
+type PermissionType = 'public' | 'private' | 'protected';
+
+const props = defineProps<{
+  visibility: PermissionType;
+  checkedList: string[];
+  optionalList: {
+    key: string;
+    label: string;
+  }[];
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visibility', visibility: PermissionType): void;
+  (e: 'update:checkedList', checkedList: string[]): void;
+}>();
+
+const permissionTypeList = [
+  {
+    label: '公开（所有人可见）',
+    value: 'public',
+  },
+  {
+    label: '私密（仅自己可见）',
+    value: 'private',
+  },
+  {
+    label: '部分人可见',
+    value: 'protected',
+  },
+];
+
+const searchKeyword = ref('');
+const checkedUserList = computed(() =>
+  props.optionalList.filter((item) => props.checkedList.includes(item.key)),
+);
+
+function onCheckChange(value: string[]) {
+  emits('update:checkedList', value);
+}
+
+const filteredOptionalList = computed(() => {
+  if (!searchKeyword.value) {
+    return props.optionalList;
+  }
+  return props.optionalList.filter((item) =>
+    item.label.includes(searchKeyword.value),
+  );
+});
+</script>
+<template>
+  <div class="permission-control">
+    <el-radio-group
+      class="permission-control__radio"
+      :model-value="visibility"
+      @change="(value: PermissionType) => emits('update:visibility', value)"
+    >
+      <el-radio
+        v-for="(item, index) in permissionTypeList"
+        :key="index"
+        :value="item.value"
+      >
+        {{ item.label }}
+      </el-radio>
+    </el-radio-group>
+
+    <div
+      v-if="visibility === 'protected'"
+      class="protected-permission-selector"
+    >
+      <div class="optional-user">
+        <div class="title">
+          <div class="label">可选</div>
+          <div class="count">{{ optionalList.length }}</div>
+        </div>
+        <el-input
+          v-model="searchKeyword"
+          class="user-input"
+          placeholder="搜索用户"
+          type="search"
+          :suffix-icon="Search"
+        ></el-input>
+
+        <el-checkbox-group
+          class="user-checkbox"
+          :model-value="checkedList"
+          @change="onCheckChange"
+        >
+          <el-checkbox
+            v-for="(item, index) in filteredOptionalList"
+            :key="index"
+            :value="item.key"
+          >
+            <span class="circle"></span>
+            {{ item.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div class="selected-user">
+        <div class="title">
+          <div class="label">已选</div>
+          <div class="count">{{ checkedList.length }}</div>
+        </div>
+
+        <el-checkbox-group
+          class="user-checkbox"
+          :model-value="checkedList"
+          @change="onCheckChange"
+        >
+          <el-checkbox
+            v-for="(item, index) in checkedUserList"
+            :key="index"
+            :value="item.key"
+          >
+            <span class="circle"></span>
+            {{ item.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.permission-control {
+  :deep(.el-radio-group) {
+    .el-radio {
+      margin-right: 22px;
+    }
+  }
+
+  .protected-permission-selector {
+    display: flex;
+    gap: 4px;
+  }
+
+  .optional-user,
+  .selected-user {
+    width: calc(50% - 2px);
+    background-color: var(--o-bash-bg);
+    padding: 16px 0 16px 16px;
+    border-radius: 4px;
+    height: 292px;
+    .title {
+      display: flex;
+      gap: 12px;
+      font-size: 12px;
+      font-weight: bolder;
+      margin-bottom: 16px;
+
+      .label {
+        height: 16px;
+        line-height: 16px;
+      }
+      .count {
+        padding: 0 4px;
+        min-width: 28px;
+        background-color: var(--o-time-text);
+        border-radius: 8px;
+        text-align: center;
+        height: 16px;
+        line-height: 16px;
+      }
+    }
+
+    .user-input {
+      padding-right: 16px;
+    }
+
+    .user-checkbox {
+      margin-top: 16px;
+      max-height: 180px;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+
+      .el-checkbox {
+        height: 16px;
+      }
+    }
+  }
+  .selected-user {
+    .user-checkbox {
+      max-height: 230px;
+    }
+  }
+}
+</style>
diff --git a/src/views/createapp/components/PromptDrawer.vue b/src/views/createapp/components/PromptDrawer.vue
new file mode 100644
index 00000000..2d7376df
--- /dev/null
+++ b/src/views/createapp/components/PromptDrawer.vue
@@ -0,0 +1,275 @@
+<script lang="ts" setup>
+import { Close, CirclePlus, Search } from '@element-plus/icons-vue';
+import { onMounted, ref, watch } from 'vue';
+import { api } from '@/apis';
+import NewOrEditPrompt from './NewOrEditPrompt.vue';
+import type { Prompt } from '@/apis/appCenter';
+import { ElMessage } from 'element-plus';
+
+defineProps<{
+  visible: boolean;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', visible: boolean): void;
+  (e: 'confirm', prompt: Prompt): void;
+}>();
+
+const searchKeyword = ref();
+const promptList = ref<Prompt[]>([]);
+
+const selectedPrompt = ref<Prompt>(promptList.value[0]);
+const toBeEditPrompt = ref<Prompt>();
+
+function onEditClick(prompt: Prompt) {
+  toBeEditPrompt.value = prompt;
+  isNewPromptVisible.value = true;
+}
+
+const isNewPromptVisible = ref(false);
+
+/**
+ * 查询提示词
+ */
+async function queryPrompts() {
+  const [, res] = await api.getPrompts(searchKeyword.value);
+  if (res) {
+    promptList.value = res.result.prompts;
+    selectedPrompt.value = res.result.prompts[0];
+  }
+}
+
+/**
+ * 删除提示词
+ * @param prompt
+ */
+async function onDeleteClick(prompt: Prompt) {
+  const [err, _] = await api.deletePrompt(prompt.promptId);
+  if (!err) {
+    ElMessage.success('删除成功');
+    queryPrompts();
+  }
+}
+
+watch(
+  () => isNewPromptVisible.value,
+  (newValue) => {
+    if (!newValue) {
+      toBeEditPrompt.value = undefined;
+    }
+  },
+);
+
+onMounted(() => {
+  queryPrompts();
+});
+</script>
+<template>
+  <div class="prompt-drawer">
+    <el-drawer
+      size="700"
+      :model-value="visible"
+      title="提示词"
+      @close="emits('update:visible', false)"
+    >
+      <div class="wrapper">
+        <div class="search">
+          <el-input
+            v-model="searchKeyword"
+            type="search"
+            placeholder="搜索"
+            :suffix-icon="Search"
+            @change="queryPrompts"
+          ></el-input>
+          <el-button :icon="CirclePlus" @click="isNewPromptVisible = true">
+            新建提示词
+          </el-button>
+        </div>
+
+        <div class="prompt-wrapper">
+          <div class="prompt-list">
+            <template v-for="item in promptList">
+              <div
+                class="prompt-item"
+                :class="{
+                  'prompt-item__active':
+                    selectedPrompt.promptId === item.promptId,
+                }"
+                @click="selectedPrompt = item"
+              >
+                <div class="name">
+                  <p>{{ item.name }}</p>
+                  <div class="operate-button">
+                    <el-tooltip content="编辑" placement="top">
+                      <img
+                        src="@/assets/svgs/light_editor.svg"
+                        alt=""
+                        @click.stop="onEditClick(item)"
+                      />
+                    </el-tooltip>
+                    <el-tooltip content="删除" placement="top">
+                      <img
+                        src="@/assets/svgs/light_delete.svg"
+                        alt=""
+                        @click="onDeleteClick(item)"
+                      />
+                    </el-tooltip>
+                  </div>
+                </div>
+                <p class="description">{{ item.description }}</p>
+              </div>
+            </template>
+          </div>
+          <div class="prompt-preview">
+            <p class="prompt-preview__title">系统配置区：</p>
+            <div class="prompt-preview__content">
+              {{ selectedPrompt.prompt }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <el-button @click="emits('update:visible', false)">关闭</el-button>
+        <el-button type="primary" @click="emits('confirm', selectedPrompt)">
+          确认
+        </el-button>
+      </template>
+    </el-drawer>
+
+    <NewOrEditPrompt
+      v-model:visible="isNewPromptVisible"
+      :prompt="toBeEditPrompt"
+      :title="toBeEditPrompt ? '编辑提示词' : '新建提示词'"
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+.prompt-drawer {
+  :deep(.el-drawer) {
+    .el-drawer__header {
+      color: #000;
+      font-weight: 700;
+      padding: 24px 24px 0px 24px;
+      margin: 0;
+    }
+    .el-drawer__body {
+      padding: 0 24px;
+    }
+    .el-drawer__footer {
+      padding: 0;
+      padding: 8px 24px;
+      box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .wrapper {
+    height: calc(100vh - 140px);
+    display: flex;
+    flex-direction: column;
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #000;
+      p {
+        font-size: 16px;
+        font-weight: 700;
+      }
+    }
+
+    .search {
+      margin-top: 16px;
+      display: flex;
+      gap: 16px;
+      .el-input > .el-input__wrapper {
+        --o-input-border-radius: 4px;
+      }
+      .el-textarea {
+        --o-textarea-border-radius: 4px;
+      }
+    }
+
+    .prompt-wrapper {
+      height: 100%;
+      display: flex;
+      margin-top: 16px;
+      gap: 16px;
+
+      .prompt-list {
+        padding: 2px;
+        overflow: scroll;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        width: 240px;
+        .prompt-item {
+          padding: 16px;
+          border-radius: 4px;
+          background-color: var(--el-collapse-header-bg);
+          cursor: pointer;
+
+          &:hover {
+            outline: 2px solid rgb(99, 149, 253);
+
+            .name > .operate-button {
+              display: flex;
+              gap: 4px;
+            }
+          }
+
+          .name {
+            font-size: 14px;
+            font-weight: 700;
+            color: #000;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            p {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+            .operate-button {
+              display: none;
+            }
+          }
+
+          .description {
+            margin-top: 8px;
+            font-size: 12px;
+            color: rgb(78, 88, 101);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        .prompt-item__active {
+          outline: 2px solid rgb(99, 149, 253);
+        }
+      }
+
+      .prompt-preview {
+        flex: 1;
+        border-radius: 4px;
+        border: 1px solid rgb(223, 229, 239);
+        padding: 16px;
+        &__title {
+          font-size: 14px;
+          color: #000;
+        }
+        &__content {
+          flex: 1;
+          margin-top: 8px;
+          font-size: 12px;
+          color: rgb(78, 88, 101);
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+}
+</style>
-- 
Gitee