feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/agent-ide/prompt/.storybook/main.js

@@ -0,0 +1,31 @@
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  viteFinal: config =>
+    mergeConfig(config, {
+      plugins: [
+        svgr({
+          svgrOptions: {
+            native: false,
+          },
+        }),
+      ],
+    }),
+};
+export default config;

frontend/packages/agent-ide/prompt/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/packages/agent-ide/prompt/.stylelintrc.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+});

frontend/packages/agent-ide/prompt/README.md

@@ -0,0 +1,16 @@
+# @coze-agent-ide/prompt
+
+> Project template for react component with storybook.
+
+## Features
+
+- [x] eslint & ts
+- [x] esm bundle
+- [x] umd bundle
+- [x] storybook
+
+## Commands
+
+- init: `rush update`
+- dev: `npm run dev`
+- build: `npm run build`

frontend/packages/agent-ide/prompt/config/rush-project.json

@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["dist"]
+    }
+  ]
+}

frontend/packages/agent-ide/prompt/eslint.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {},
+});

frontend/packages/agent-ide/prompt/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@coze-agent-ide/prompt",
+  "version": "0.0.1",
+  "description": "agent ide prompt",
+  "license": "Apache-2.0",
+  "author": "gaoyuanhan.duty@bytedance.com",
+  "maintainers": [],
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@coze-agent-ide/tool": "workspace:*",
+    "@coze-arch/bot-api": "workspace:*",
+    "@coze-arch/bot-studio-store": "workspace:*",
+    "@coze-arch/coze-design": "0.0.6-alpha.346d77",
+    "@coze-arch/i18n": "workspace:*",
+    "@coze-arch/idl": "workspace:*",
+    "@coze-common/chat-area": "workspace:*",
+    "@coze-common/editor-plugins": "workspace:*",
+    "@coze-common/prompt-kit": "workspace:*",
+    "@coze-common/prompt-kit-adapter": "workspace:*",
+    "@coze-common/prompt-kit-base": "workspace:*",
+    "@coze-data/knowledge-data-set-for-agent": "workspace:*",
+    "@coze-studio/bot-detail-store": "workspace:*",
+    "classnames": "^2.3.2",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "@coze-arch/bot-typings": "workspace:*",
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitest/coverage-v8": "~3.0.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "stylelint": "^15.11.0",
+    "vite-plugin-svgr": "~3.3.0",
+    "vitest": "~3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  }
+}
+

frontend/packages/agent-ide/prompt/src/components/prompt-editor/agent-ide-prompt/index.module.less

@@ -0,0 +1,20 @@
+/* stylelint-disable declaration-no-important */
+.agent-ide-prompt-editor {
+  overflow-x: hidden;
+  box-sizing: content-box;
+  padding: 12px 8px 0;
+
+  > div:first-child {
+    height: 100%;
+  }
+
+  :global {
+    .cm-editor {
+      height: 100%;
+    }
+
+    .cm-placeholder {
+      height: 100% !important;
+    }
+  }
+}

frontend/packages/agent-ide/prompt/src/components/prompt-editor/agent-ide-prompt/index.tsx

@@ -0,0 +1,124 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useShallow } from 'zustand/react/shallow';
+import cls from 'classnames';
+import { useBotInfoStore } from '@coze-studio/bot-detail-store/bot-info';
+import { useBotDetailIsReadonly } from '@coze-studio/bot-detail-store';
+import {
+  type EditorAPI,
+  PromptEditorRender,
+  useEditor,
+  type PromptEditorRenderProps,
+} from '@coze-common/prompt-kit-base/editor';
+import { RecommendPannel } from '@coze-common/prompt-kit/prompt-recommend';
+import {
+  LibraryBlockWidget,
+  LibrarySearchPopover,
+} from '@coze-common/editor-plugins/library-insert';
+import { InputSlotWidget } from '@coze-common/editor-plugins/input-slot';
+import { SpaceType } from '@coze-arch/idl/developer_api';
+import { useSpaceStore } from '@coze-arch/bot-studio-store';
+import { BusinessType } from '@coze-arch/bot-api/playground_api';
+
+import { useGetLibrarysData } from '../../../hooks/use-prompt/use-get-library-data';
+import { useAddLibrary } from '../../../hooks/use-prompt/use-add-library';
+
+import styles from './index.module.less';
+export interface AgentIdePromptProps extends PromptEditorRenderProps {
+  isSingle: boolean;
+  editorExtensions?: React.ReactNode;
+}
+const AgentIdePrompt = (props: AgentIdePromptProps) => {
+  const { editorExtensions } = props;
+  const { libraryList } = useGetLibrarysData();
+  const { botId, space_id, businessType } = useBotInfoStore(
+    useShallow(state => ({
+      botId: state.botId,
+      space_id: state.space_id,
+      businessType: state.businessType,
+    })),
+  );
+  const spaceType = useSpaceStore(state => state.space.space_type);
+  const isPersonal = spaceType === SpaceType.Personal;
+  const addLibrary = useAddLibrary();
+  const isReadonly = useBotDetailIsReadonly();
+  const editor = useEditor<EditorAPI>();
+  const prompt = editor?.getValue();
+  if (!props.isSingle) {
+    return (
+      <div
+        className={cls(
+          styles['agent-ide-prompt-editor'],
+          'overflow-y-auto coz-bg-max',
+          'h-[320px] p-[16px]',
+        )}
+      >
+        <PromptEditorRender {...props} />
+      </div>
+    );
+  }
+  if (isReadonly) {
+    return (
+      <div className={styles['agent-ide-prompt-editor']}>
+        <PromptEditorRender {...props} />
+        <InputSlotWidget mode="input" />
+        <LibraryBlockWidget
+          librarys={[]}
+          readonly
+          onAddLibrary={addLibrary}
+          spaceId={space_id}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        className={styles['agent-ide-prompt-editor']}
+        style={{ height: '100%' }}
+      >
+        <PromptEditorRender {...props} />
+      </div>
+      <InputSlotWidget mode="input" />
+      <LibraryBlockWidget
+        librarys={libraryList}
+        onAddLibrary={addLibrary}
+        spaceId={space_id}
+        // Agent IDE 在抖音分身场景下，需要传入分身id进行判断当前资源是否存在 社区版暂不支持该功能
+        avatarBotId={
+          businessType === BusinessType.DouyinAvatar ? botId : undefined
+        }
+      />
+      <LibrarySearchPopover librarys={libraryList} direction="topLeft" />
+      {prompt?.length === 0 ? (
+        <RecommendPannel
+          source="bot_detail_page"
+          tabs={['Recommended', 'Team']}
+          isPersonal={isPersonal}
+          importPromptWhenEmpty={props.defaultValue}
+          spaceId={space_id}
+          onInsertPrompt={insertPrompt => {
+            props?.onChange?.(insertPrompt);
+          }}
+        />
+      ) : null}
+      {editorExtensions}
+    </>
+  );
+};
+export default AgentIdePrompt;

frontend/packages/agent-ide/prompt/src/components/prompt-editor/index.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { lazy, Suspense } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import { usePersonaStore } from '@coze-studio/bot-detail-store/persona';
+import { useBotDetailIsReadonly } from '@coze-studio/bot-detail-store';
+import { Spin } from '@coze-arch/coze-design';
+const AgentIdePrompt = lazy(() => import('./agent-ide-prompt'));
+
+export interface PromptEditorEntryProps {
+  className?: string;
+  isSingle: boolean;
+  editorExtensions?: React.ReactNode;
+}
+
+export const PromptEditorEntry: React.FC<PromptEditorEntryProps> = ({
+  className,
+  isSingle,
+  editorExtensions,
+}) => {
+  const { systemMessageData, setPersonaByImmer } = usePersonaStore(
+    useShallow(state => ({
+      systemMessageData: state.systemMessage.data,
+      setPersonaByImmer: state.setPersonaByImmer,
+    })),
+  );
+  const isReadonly = useBotDetailIsReadonly();
+
+  const onChange = (value: string) => {
+    setPersonaByImmer(persona => {
+      persona.systemMessage.data = value;
+    });
+  };
+
+  return (
+    <Suspense fallback={<Spin style={{ width: '100%', height: '100%' }} />}>
+      <AgentIdePrompt
+        className={className}
+        defaultValue={systemMessageData}
+        onChange={onChange}
+        readonly={isReadonly}
+        isSingle={isSingle}
+        editorExtensions={editorExtensions}
+      />
+    </Suspense>
+  );
+};

frontend/packages/agent-ide/prompt/src/components/prompt-editor/type.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export interface PromptEditorProps {
+  className?: string;
+  onChange: (value: string) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  readonly: boolean;
+  value: string;
+  isSingle: boolean;
+}

frontend/packages/agent-ide/prompt/src/components/prompt-view/components/actions/import-to-library.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useShallow } from 'zustand/react/shallow';
+import { useDiffTaskStore } from '@coze-studio/bot-detail-store/diff-task';
+import { useBotInfoStore } from '@coze-studio/bot-detail-store/bot-info';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozTrayArrowUp } from '@coze-arch/coze-design/icons';
+import { IconButton, Tooltip } from '@coze-arch/coze-design';
+import { useEditor } from '@coze-common/prompt-kit-base/editor';
+import { type EditorAPI } from '@coze-common/prompt-kit-base/editor';
+import { usePromptConfiguratorModal } from '@coze-common/prompt-kit-adapter/create-prompt';
+export const ImportToLibrary = (props: {
+  readonly: boolean;
+  enableDiff: boolean;
+}) => {
+  const { readonly, enableDiff = true } = props;
+  const { spaceId, botId } = useBotInfoStore(
+    useShallow(state => ({
+      spaceId: state.space_id,
+      botId: state.botId,
+    })),
+  );
+  const enterDiffMode = useDiffTaskStore(state => state.enterDiffMode);
+  const editor = useEditor<EditorAPI>();
+  const { open: openCreatePrompt, node: promptConfiguratorModal } =
+    usePromptConfiguratorModal({
+      spaceId,
+      enableDiff,
+      source: 'bot_detail_page',
+      botId,
+      onDiff: ({ prompt }) => {
+        enterDiffMode({
+          diffTask: 'prompt',
+          promptDiffInfo: {
+            diffPromptResourceId: '',
+            diffMode: 'new-diff',
+            diffPrompt: prompt,
+          },
+        });
+      },
+    });
+  return (
+    <div>
+      <Tooltip content={I18n.t('compare_tooltips_submit_to_the_prompt')}>
+        <IconButton
+          color="secondary"
+          icon={<IconCozTrayArrowUp className="!text-xxl !coz-fg-primary" />}
+          onClick={() =>
+            openCreatePrompt({
+              mode: 'create',
+              defaultPrompt: editor?.getValue(),
+            })
+          }
+          disabled={readonly}
+        />
+      </Tooltip>
+      {promptConfiguratorModal}
+    </div>
+  );
+};

frontend/packages/agent-ide/prompt/src/components/prompt-view/components/actions/index.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { PromptLibrary } from './prompt-library';
+export { ImportToLibrary } from './import-to-library';

frontend/packages/agent-ide/prompt/src/components/prompt-view/components/actions/prompt-library.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useShallow } from 'zustand/react/shallow';
+import { useDiffTaskStore } from '@coze-studio/bot-detail-store/diff-task';
+import { useBotInfoStore } from '@coze-studio/bot-detail-store/bot-info';
+import { useEditor } from '@coze-common/prompt-kit-base/editor';
+import { type EditorAPI } from '@coze-common/prompt-kit-base/editor';
+import { usePromptLibraryModal } from '@coze-common/prompt-kit';
+import { SpaceType } from '@coze-arch/idl/developer_api';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozLightbulb } from '@coze-arch/coze-design/icons';
+import { IconButton, Tooltip } from '@coze-arch/coze-design';
+import { useSpaceStore } from '@coze-arch/bot-studio-store';
+export const PromptLibrary = (props: {
+  readonly: boolean;
+  enableDiff: boolean;
+}) => {
+  const { readonly, enableDiff = true } = props;
+  const editor = useEditor<EditorAPI>();
+  const { spaceId, botId } = useBotInfoStore(
+    useShallow(state => ({
+      spaceId: state.space_id,
+      botId: state.botId,
+    })),
+  );
+  const spaceType = useSpaceStore(state => state.space.space_type);
+  const enterDiffMode = useDiffTaskStore(state => state.enterDiffMode);
+  const {
+    open,
+    node: PromptLibraryModal,
+    close,
+  } = usePromptLibraryModal({
+    spaceId,
+    botId,
+    defaultActiveTab: 'Recommended',
+    isPersonal: spaceType === SpaceType.Personal,
+    editor: editor as EditorAPI,
+    source: 'bot_detail_page',
+    enableDiff,
+    onDiff: ({ prompt }) => {
+      enterDiffMode({
+        diffTask: 'prompt',
+        promptDiffInfo: {
+          diffPromptResourceId: '',
+          diffMode: 'new-diff',
+          diffPrompt: prompt,
+        },
+      });
+      close();
+    },
+  });
+  return (
+    <div>
+      <Tooltip content={I18n.t('prompt_library_prompt_library')}>
+        <IconButton
+          data-testid="bot.ide.prompt_resource"
+          icon={<IconCozLightbulb className="text-xxl !coz-fg-primary" />}
+          color="secondary"
+          onClick={() => {
+            open();
+          }}
+          disabled={readonly}
+        />
+      </Tooltip>
+      {PromptLibraryModal}
+    </div>
+  );
+};

frontend/packages/agent-ide/prompt/src/components/prompt-view/index.module.less

@@ -0,0 +1,106 @@
+/* stylelint-disable */
+.system-area {
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+
+  .bot-system-block {
+    position: relative;
+    overflow: auto;
+    flex: 1;
+
+    .prompt-optimize-area {
+      cursor: pointer;
+
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+
+      padding: 0 4px;
+
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 22px;
+
+      border-radius: 6px;
+
+      @apply coz-fg-secondary;
+
+      &.prompt-optimize-area-multiple {
+        padding: 1px;
+        border-radius: 4px;
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+
+        @apply coz-fg-secondary;
+      }
+
+      &:hover {
+        background: var(--light-usage-fill-color-fill-0,
+            rgba(46, 46, 56, 4%));
+      }
+
+      .prompt-optimize-icon {
+        svg {
+          width: 14px;
+          height: 14px;
+        }
+
+        &.prompt-optimize-icon-single {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
+  .bot-system-block-readOnly {
+    height: 274px;
+    padding-bottom: 24px;
+  }
+}
+
+.child-block {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.system-area-multi {
+  height: auto;
+  margin-bottom: 18px;
+
+  .bot-system-block {
+    padding-bottom: 0;
+  }
+
+  .bot-debug-system {
+    textarea {
+      height: 274px;
+      padding: 16px !important;
+      background-color: #fff;
+    }
+  }
+}
+
+.bot-system-block-no-border {
+  border-bottom: 1px solid transparent;
+}
+
+.ai-button-icon-color {
+  svg {
+    // 有神奇的全局覆盖。。。
+    @apply coz-fg-hglt !important;
+  }
+
+}
+
+.prompt-content-header {
+  height: 36px !important;
+  padding-top: 12px !important;
+}

frontend/packages/agent-ide/prompt/src/components/prompt-view/index.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { type PropsWithChildren } from 'react';
+
+import classNames from 'classnames';
+import { ToolContentBlock } from '@coze-agent-ide/tool';
+import { useBotInfoStore } from '@coze-studio/bot-detail-store/bot-info';
+import { useBotDetailIsReadonly } from '@coze-studio/bot-detail-store';
+import { I18n } from '@coze-arch/i18n';
+import { BotMode } from '@coze-arch/bot-api/developer_api';
+
+import { PromptEditorEntry } from '../prompt-editor';
+
+import s from './index.module.less';
+
+export interface PromptViewProps {
+  actionButton?: React.ReactNode;
+  editorExtensions?: React.ReactNode;
+  className?: string;
+}
+
+export const PromptView: React.FC<
+  PropsWithChildren<PromptViewProps>
+> = props => {
+  const { actionButton, className, children, editorExtensions } = props;
+
+  const isReadonly = useBotDetailIsReadonly();
+  const mode = useBotInfoStore(innerS => innerS.mode);
+
+  const isSingle = mode === BotMode.SingleMode;
+  const isMulti = mode === BotMode.MultiMode;
+
+  return (
+    <>
+      <div
+        className={classNames(
+          s['system-area'],
+          isMulti && s['system-area-multi'],
+        )}
+      >
+        <ToolContentBlock
+          className={classNames(
+            s['bot-system-block'],
+            'coz-bg-plus',
+            isReadonly && s['bot-system-block-readOnly'],
+            s['bot-system-block-no-border'],
+            className,
+          )}
+          headerClassName={classNames(
+            isSingle && s['prompt-content-header'],
+            '!pl-5',
+          )}
+          childNodeWrapClassName={classNames(
+            s['child-block'],
+            isSingle && '!p-0',
+          )}
+          showBorderTopRadius
+          showBottomBorder
+          defaultExpand
+          header={I18n.t('bot_persona_and_prompt')}
+          actionButton={actionButton}
+          collapsible={isMulti}
+        >
+          <PromptEditorEntry
+            isSingle={isSingle}
+            className={s['bot-debug-system']}
+            editorExtensions={editorExtensions}
+          />
+          {children}
+        </ToolContentBlock>
+      </div>
+    </>
+  );
+};

frontend/packages/agent-ide/prompt/src/hooks/use-prompt/use-add-library.ts

@@ -0,0 +1,137 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useShallow } from 'zustand/react/shallow';
+import { useBotSkillStore } from '@coze-studio/bot-detail-store/bot-skill';
+import { type WorkFlowItemType } from '@coze-studio/bot-detail-store';
+import { FormatType } from '@coze-arch/idl/knowledge';
+import { WorkflowMode } from '@coze-arch/idl/developer_api';
+import { useDatasetStore } from '@coze-data/knowledge-data-set-for-agent';
+import { type ILibraryItem } from '@coze-common/editor-plugins/library-insert';
+
+const useAddPluginLibrary = () => {
+  const { pluginApis, updateSkillPluginApis } = useBotSkillStore(
+    useShallow(store => ({
+      pluginApis: store.pluginApis,
+      updateSkillPluginApis: store.updateSkillPluginApis,
+    })),
+  );
+  return (library: ILibraryItem) => {
+    updateSkillPluginApis([
+      ...pluginApis,
+      {
+        ...library.detail_info?.plugin_detail,
+      },
+    ]);
+  };
+};
+
+const useAddWorkflowLibrary = () => {
+  const { workflows, updateSkillWorkflows } = useBotSkillStore(
+    useShallow(store => ({
+      workflows: store.workflows,
+      updateSkillWorkflows: store.updateSkillWorkflows,
+    })),
+  );
+  return (library: ILibraryItem) => {
+    const appendWorkflow = library.detail_info?.workflow_detail ?? {};
+    const allWorkflows = workflows.concat(appendWorkflow as WorkFlowItemType);
+    updateSkillWorkflows(allWorkflows);
+  };
+};
+
+const useAddImageFlowLibrary = () => {
+  const { workflows, updateSkillWorkflows } = useBotSkillStore(
+    useShallow(store => ({
+      workflows: store.workflows,
+      updateSkillWorkflows: store.updateSkillWorkflows,
+    })),
+  );
+  return (library: ILibraryItem) => {
+    const appendWorkflow = library.detail_info?.workflow_detail ?? {};
+    const allWorkflows = workflows
+      .filter(
+        item =>
+          (item.flow_mode || WorkflowMode.Workflow) !== WorkflowMode.Imageflow,
+      )
+      .concat(appendWorkflow as WorkFlowItemType);
+    updateSkillWorkflows(allWorkflows);
+  };
+};
+
+const useAddKnowledgeLibrary = () => {
+  const { knowledge, updateSkillKnowledgeDatasetList } = useBotSkillStore(
+    useShallow(store => ({
+      knowledge: store.knowledge,
+      updateSkillKnowledgeDatasetList: store.updateSkillKnowledgeDatasetList,
+    })),
+  );
+  const { dataSetList, setDataSetList } = useDatasetStore(
+    useShallow(state => ({
+      dataSetList: state.dataSetList,
+      setDataSetList: state.setDataSetList,
+    })),
+  );
+  return (library: ILibraryItem) => {
+    const formatTypeMap = {
+      text: FormatType.Text,
+      table: FormatType.Table,
+      image: FormatType.Image,
+    };
+    setDataSetList([
+      ...dataSetList,
+      {
+        dataset_id: library.id,
+        name: library.name,
+        format_type: formatTypeMap[library.type] ?? FormatType.Text,
+        description: library.desc,
+        icon_url: library.icon_url,
+      },
+    ]);
+    updateSkillKnowledgeDatasetList([
+      ...knowledge.dataSetList,
+      {
+        dataset_id: library.id,
+        name: library.name,
+        description: library.desc,
+      },
+    ]);
+  };
+};
+export const useAddLibrary = () => {
+  const addPluginLibrary = useAddPluginLibrary();
+  const addWorkflowLibrary = useAddWorkflowLibrary();
+  const addImageFlowLibrary = useAddImageFlowLibrary();
+  const addKnowledgeLibrary = useAddKnowledgeLibrary();
+  return (library: ILibraryItem) => {
+    if (library.type === 'plugin') {
+      addPluginLibrary(library);
+      return;
+    }
+    if (library.type === 'workflow') {
+      addWorkflowLibrary(library);
+      return;
+    }
+    if (library.type === 'imageflow') {
+      addImageFlowLibrary(library);
+      return;
+    }
+    if (['text', 'table', 'image'].includes(library.type)) {
+      addKnowledgeLibrary(library);
+      return;
+    }
+  };
+};

frontend/packages/agent-ide/prompt/src/hooks/use-prompt/use-get-library-data.ts

@@ -0,0 +1,118 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useMemo } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import { useBotSkillStore } from '@coze-studio/bot-detail-store/bot-skill';
+import { WorkflowMode } from '@coze-arch/bot-api/workflow_api';
+import { FormatType } from '@coze-arch/bot-api/knowledge';
+import { useDatasetStore } from '@coze-data/knowledge-data-set-for-agent';
+import { type ILibraryList } from '@coze-common/editor-plugins/library-insert';
+
+export const useGetLibrarysData = () => {
+  const { plugins, workflows } = useBotSkillStore(
+    useShallow(state => ({
+      plugins: state.pluginApis,
+      workflows: state.workflows,
+    })),
+  );
+  const { dataSetList } = useDatasetStore(
+    useShallow(state => ({
+      dataSetList: state.dataSetList,
+    })),
+  );
+  const libraryList = useMemo<ILibraryList>(
+    () => [
+      {
+        type: 'plugin',
+        items: plugins.map(plugin => ({
+          ...plugin,
+          type: 'plugin',
+          id: String(plugin.plugin_id),
+          icon_url: String(plugin.plugin_icon),
+          desc: String(plugin.desc),
+          name: String(plugin.name),
+        })),
+      },
+      {
+        type: 'workflow',
+        items: workflows.map(workflow => ({
+          ...workflow,
+          type: 'workflow',
+          id: workflow.workflow_id,
+          icon_url: workflow.plugin_icon,
+          desc: workflow.desc,
+          name: workflow.name,
+        })),
+      },
+      {
+        type: 'imageflow',
+        items: workflows
+          .filter(workflow => workflow.flow_mode === WorkflowMode.Imageflow)
+          .map(workflow => ({
+            ...workflow,
+            id: workflow.workflow_id,
+            type: 'workflow',
+            icon_url: workflow.plugin_icon,
+            desc: workflow.desc,
+            name: workflow.name,
+          })),
+      },
+      {
+        type: 'image',
+        items: dataSetList
+          .filter(item => item.format_type === FormatType.Image)
+          .map(item => ({
+            ...item,
+            id: String(item.dataset_id),
+            type: 'image',
+            icon_url: String(item.icon_url),
+            desc: String(item.description),
+            name: String(item.name),
+          })),
+      },
+      {
+        type: 'table',
+        items: dataSetList
+          .filter(item => item.format_type === FormatType.Table)
+          .map(item => ({
+            ...item,
+            id: String(item.dataset_id),
+            type: 'table',
+            icon_url: String(item.icon_url),
+            desc: String(item.description),
+            name: String(item.name),
+          })),
+      },
+      {
+        type: 'text',
+        items: dataSetList
+          .filter(item => item.format_type === FormatType.Text)
+          .map(item => ({
+            ...item,
+            id: String(item.dataset_id),
+            type: 'text',
+            icon_url: String(item.icon_url),
+            desc: String(item.description),
+            name: String(item.name),
+          })),
+      },
+    ],
+    [plugins, workflows, dataSetList],
+  );
+  return { libraryList };
+};

frontend/packages/agent-ide/prompt/src/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { type PromptViewProps, PromptView } from './components/prompt-view';
+export {
+  PromptLibrary,
+  ImportToLibrary,
+} from './components/prompt-view/components/actions';
+export { useGetLibrarysData } from './hooks/use-prompt/use-get-library-data';
+export { useAddLibrary } from './hooks/use-prompt/use-add-library';

frontend/packages/agent-ide/prompt/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />

frontend/packages/agent-ide/prompt/tsconfig.build.json

@@ -0,0 +1,69 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [
+    {
+      "path": "../../arch/bot-api/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-store/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/i18n/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/idl/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/chat-area/chat-area/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/editor-plugins/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/prompt-kit/adapter/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/prompt-kit/base/tsconfig.build.json"
+    },
+    {
+      "path": "../../common/prompt-kit/main/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/stylelint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/vitest-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../data/knowledge/knowledge-data-set-for-agent/tsconfig.build.json"
+    },
+    {
+      "path": "../../studio/stores/bot-detail/tsconfig.build.json"
+    },
+    {
+      "path": "../tool/tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/agent-ide/prompt/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "exclude": ["**/*"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ]
+}

frontend/packages/agent-ide/prompt/tsconfig.misc.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler"
+  },
+  "include": ["__tests__", "vitest.config.ts", "stories"],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/agent-ide/prompt/vitest.config.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+});