feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/agent-ide/plugin-modal-adapter/src/components/plugin-modal/filter/index.module.less

@@ -0,0 +1,4 @@
+.plugin-modal-filter {
+  display: flex;
+  gap: 12px;
+}

frontend/packages/agent-ide/plugin-modal-adapter/src/components/plugin-modal/filter/index.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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 FC } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { UISelect, Select } from '@coze-arch/bot-semi';
+import { OrderBy } from '@coze-arch/bot-api/developer_api';
+import { PluginFilterType } from '@coze-agent-ide/plugin-shared';
+import { type From, type PluginQuery } from '@coze-agent-ide/plugin-shared';
+
+import s from './index.module.less';
+
+export interface PluginModalFilterProp {
+  query: PluginQuery;
+  setQuery: (value: Partial<PluginQuery>, refreshPage?: boolean) => void;
+  from?: From;
+}
+
+const timeOptions = [
+  {
+    label: I18n.t('Create_time'),
+    value: OrderBy.CreateTime,
+  },
+  {
+    label: I18n.t('Update_time'),
+    value: OrderBy.UpdateTime,
+  },
+];
+
+export const PluginModalFilter: FC<PluginModalFilterProp> = ({
+  query,
+  setQuery,
+}) => {
+  /**
+   * 空间插件：创建、编辑时间排序
+   * 公共插件：热度、发布时间排序
+   * */
+  const getFilterItem = () => {
+    if (
+      query.type === PluginFilterType.Mine ||
+      query.type === PluginFilterType.Team ||
+      query.type === PluginFilterType.Project
+    ) {
+      return (
+        <UISelect
+          label={I18n.t('Sort')}
+          value={query.orderBy}
+          optionList={timeOptions}
+          onChange={v => {
+            setQuery({
+              orderBy: v as OrderBy,
+            });
+          }}
+        >
+          <Select.Option value={OrderBy.CreateTime}>
+            {I18n.t('Create_time')}
+          </Select.Option>
+          <Select.Option value={OrderBy.UpdateTime}>
+            {I18n.t('Edit_time_2')}
+          </Select.Option>
+        </UISelect>
+      );
+    }
+
+    return null;
+  };
+
+  return <div className={s['plugin-modal-filter']}>{getFilterItem()}</div>;
+};

frontend/packages/agent-ide/plugin-modal-adapter/src/components/plugin-modal/plugin-filter/index.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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 classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { useSpaceStore } from '@coze-arch/bot-studio-store';
+import { UICompositionModalSider } from '@coze-arch/bot-semi';
+import { IconMyTools, IconTeamTools } from '@coze-arch/bot-icons';
+import { type Int64, SpaceType } from '@coze-arch/bot-api/developer_api';
+import {
+  PluginFilterType,
+  From,
+  getDefaultPluginCategory,
+} from '@coze-agent-ide/plugin-shared';
+
+import s from './plugin-filter.module.less';
+
+export interface PluginFilterProps {
+  isSearching: boolean;
+  type: Int64;
+  onChange: (type: Int64) => void;
+  projectId?: string;
+  from?: From;
+  isShowStorePlugin?: boolean;
+}
+
+export const PluginFilter: React.FC<PluginFilterProps> = ({
+  isSearching,
+  type,
+  onChange,
+  projectId,
+  from,
+  isShowStorePlugin = true,
+}) => {
+  const spaceType = useSpaceStore(store => store.space.space_type);
+  const defaultId = getDefaultPluginCategory().id;
+  const onChangeAfterDiff = (freshType: typeof type) => {
+    // 如果是在搜索，把搜索置空
+    if (isSearching) {
+      onChange(freshType);
+      return;
+    }
+    if (freshType === type) {
+      return;
+    }
+    onChange(freshType);
+  };
+
+  return (
+    <div className={s['tool-tag-list']}>
+      {spaceType === SpaceType.Personal && (
+        <div
+          data-testid="plugin.modal.filter.option.mine"
+          className={classNames(s['tool-tag-list-cell'], {
+            [s.active]: type === PluginFilterType.Mine,
+          })}
+          onClick={() => onChangeAfterDiff(PluginFilterType.Mine)}
+        >
+          <IconMyTools className={s['tool-tag-list-cell-icon']} />
+          {I18n.t('add_resource_modal_sidebar_library_tools')}
+        </div>
+      )}
+
+      {projectId && from === From.ProjectWorkflow ? (
+        <div
+          className={classNames(s['tool-tag-list-cell'], {
+            [s.active]: type === PluginFilterType.Project,
+          })}
+          onClick={() => onChangeAfterDiff(PluginFilterType.Project)}
+        >
+          <IconTeamTools className={s['tool-tag-list-cell-icon']} />
+          {I18n.t('add_resource_modal_sidebar_project_tools')}
+        </div>
+      ) : null}
+
+      {isShowStorePlugin ? (
+        <>
+          <UICompositionModalSider.Divider />
+
+          <div className={s['tool-content-area']}>
+            <div
+              className={classNames(s['tool-tag-list-cell'], {
+                [s.active]: type === defaultId,
+              })}
+              onClick={() => onChangeAfterDiff(defaultId)}
+            >
+              {I18n.t('explore_tools')}
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+};

frontend/packages/agent-ide/plugin-modal-adapter/src/components/plugin-modal/plugin-filter/plugin-filter.module.less

@@ -0,0 +1,100 @@
+/* stylelint-disable max-nesting-depth */
+@import '@coze-common/assets/style/common.less';
+@import '@coze-common/assets/style/mixins.less';
+
+.tool-tag-list {
+  overflow: auto;
+  flex: 1;
+  flex-shrink: 0;
+
+  padding-top: 16px;
+
+  white-space: nowrap;
+
+  &-label {
+    height: 40px;
+    margin-bottom: 8px;
+    padding: 0 12px;
+
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 40px;
+    color: var(--light-usage-text-color-text-3, rgba(28, 29, 35, 35%));
+  }
+
+  &-cell {
+    cursor: pointer;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    height: 44px;
+    margin-bottom: 4px;
+    padding: 0 10px 0 12px;
+
+    font-size: 14px;
+    line-height: 44px;
+    color: #1d1c23;
+
+    border-radius: 3px;
+
+    &-icon {
+      display: flex;
+      flex-shrink: 0;
+      margin-right: 8px;
+      .common-svg-icon(24px, #1d1c23);
+
+      >img {
+        width: 24px;
+        height: 24px;
+        padding: 4px;
+      }
+    }
+
+    .tool-tag-list-cell-icon {
+      display: flex;
+    }
+
+    &-favorite {
+
+      .common-svg-icon(16px, #1d1c23);
+
+      svg {
+        margin: 4px;
+      }
+    }
+
+    &-divider {
+      width: calc(100% - 24px);
+      margin: 12px;
+      background: rgba(28, 29, 35, 12%);
+    }
+
+    &:hover {
+      color: var(--light-usage-text-color-text-0, #1c1f23);
+      background: var(--light-usage-fill-color-fill-0, rgba(46, 50, 56, 5%));
+      border-radius: 8px;
+    }
+
+    &.active {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--light-usage-text-color-text-0, #1c1d23);
+
+      background: var(--light-usage-fill-color-fill-0, rgba(46, 47, 56, 5%));
+      border-radius: 8px;
+
+      .tool-tag-list-cell-icon {
+        .common-svg-icon(24px, #4d53e8);
+
+        &.tool-tag-list-cell-favorite {
+          .common-svg-icon(16px, #4d53e8);
+        }
+      }
+
+
+    }
+  }
+}

frontend/packages/agent-ide/plugin-modal-adapter/src/components/plugin-panel/index.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 PluginPanelProps as BaseProps,
+  PluginPanel,
+} from '@coze-agent-ide/plugin-shared';
+
+export type PluginPanelProps = Omit<BaseProps, 'slot'>;
+
+export { PluginPanel };

frontend/packages/agent-ide/plugin-modal-adapter/src/index.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 {
+  type PluginFilterProps,
+  PluginFilter,
+} from './components/plugin-modal/plugin-filter';
+export {
+  PluginModalFilter,
+  type PluginModalFilterProp,
+} from './components/plugin-modal/filter';
+export { PluginPanel, type PluginPanelProps } from './components/plugin-panel';

frontend/packages/agent-ide/plugin-modal-adapter/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' />