feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/memory/variables/src/components/variable-group/group-collapsible-wraper/index.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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, type PropsWithChildren, useState } from 'react';
+
+import cls from 'classnames';
+import { IconCozArrowRight } from '@coze-arch/coze-design/icons';
+import { Collapsible } from '@coze-arch/coze-design';
+
+import { type VariableGroup } from '@/store';
+
+export const GroupCollapsibleWrapper: FC<
+  PropsWithChildren<{
+    groupInfo: VariableGroup;
+    level?: number;
+  }>
+> = props => {
+  const { groupInfo, children, level = 0 } = props;
+  const [isOpen, setIsOpen] = useState(true);
+  const isTopLevel = level === 0;
+  return (
+    <>
+      <div
+        className={cls(
+          'flex w-full flex-col cursor-pointer px-1 py-2',
+          isTopLevel ? 'hover:coz-mg-secondary-hovered hover:rounded-lg' : '',
+        )}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="flex items-center">
+          <div className="w-[22px] h-full flex items-center">
+            <IconCozArrowRight
+              className={cls('w-[14px] h-[14px]', isOpen ? 'rotate-90' : '')}
+            />
+          </div>
+          <div className="w-[370px] h-full flex items-center">
+            <div
+              className={cls(
+                'coz-stroke-primary text-xxl font-medium',
+                !isTopLevel ? '!text-sm my-[10px]' : '',
+              )}
+            >
+              {groupInfo.groupName}
+            </div>
+          </div>
+        </div>
+        {isTopLevel ? (
+          <div className="text-sm coz-fg-secondary pl-[22px]">
+            {groupInfo.groupDesc}
+          </div>
+        ) : null}
+      </div>
+      <Collapsible keepDOM isOpen={isOpen}>
+        <div className={cls('w-full h-full', !isTopLevel ? 'pl-[18px]' : '')}>
+          {children}
+        </div>
+      </Collapsible>
+    </>
+  );
+};

frontend/packages/data/memory/variables/src/components/variable-group/group-header/hooks/use-get-hide-keys.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { VariableChannel } from '@coze-arch/bot-api/memory';
+
+import { type VariableGroup } from '@/store';
+
+import { flatGroupVariableMeta } from '../../../variable-tree/utils';
+
+export const useGetHideKeys = (variableGroup: VariableGroup) => {
+  const hideKeys: string[] = [];
+
+  const hideChannel =
+    flatGroupVariableMeta([variableGroup]).filter(
+      item => (item?.effectiveChannelList?.length ?? 0) > 0,
+    ).length <= 0;
+
+  const hideTypeChange = variableGroup.channel === VariableChannel.Custom;
+
+  if (hideChannel) {
+    hideKeys.push('channel');
+  }
+
+  if (hideTypeChange) {
+    hideKeys.push('type');
+  }
+  return hideKeys;
+};

frontend/packages/data/memory/variables/src/components/variable-group/group-header/index.ts

@@ -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 { VariableGroupParamHeader } from './render';
+export { useGetHideKeys } from './hooks/use-get-hide-keys';

frontend/packages/data/memory/variables/src/components/variable-group/group-header/render.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 cls from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+export const VariableGroupParamHeader = ({
+  hideHeaderKeys,
+}: {
+  hideHeaderKeys?: string[];
+}) => (
+  <div
+    className={cls(
+      'flex w-full h-[28px] py-[6px] pl-8 items-center gap-x-4 justify-start',
+      'border border-solid coz-stroke-primary border-t-0 border-x-0',
+    )}
+  >
+    <div className="flex-1 h-full flex items-center">
+      <div className="coz-fg-secondary text-[12px] font-[500] leading-[16px]">
+        {I18n.t('bot_edit_memory_title_filed')}
+        <span className="coz-fg-hglt-red">*</span>
+      </div>
+    </div>
+    <div className="flex-1 h-full flex items-center">
+      <div className="coz-fg-secondary text-[12px] font-[500] leading-[16px]">
+        {I18n.t('bot_edit_memory_title_description')}
+      </div>
+    </div>
+    {!hideHeaderKeys?.includes('type') ? (
+      <div className="flex-none w-[166px] basis-[166px] h-full flex items-center box-content">
+        <div className="coz-fg-secondary text-[12px] font-[500] leading-[16px]">
+          {I18n.t('variable_Table_Title_type')}
+        </div>
+      </div>
+    ) : null}
+    <div className="flex-none w-[164px] basis-[164px] h-full flex items-center box-content">
+      <div className="coz-fg-secondary text-[12px] font-[500] leading-[16px]">
+        {I18n.t('bot_edit_memory_title_default')}
+      </div>
+    </div>
+    {!hideHeaderKeys?.includes('channel') ? (
+      <div className="flex-none w-[164px] basis-[164px] h-full flex items-center box-content">
+        <div className="coz-fg-secondary text-[12px] font-[500] leading-[16px]">
+          {I18n.t('variable_Table_Title_support_channels')}
+        </div>
+      </div>
+    ) : null}
+
+    <div className="flex-none w-[130px] basis-[130px] h-full flex items-center box-content">
+      <div className="coz-fg-secondary text-[12px] font-[500] leading-[16px]">
+        {I18n.t('bot_edit_memory_title_action')}
+      </div>
+    </div>
+  </div>
+);

frontend/packages/data/memory/variables/src/components/variable-group/index.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 VariableGroup as VariableGroupType } from '@/store';
+
+import { type TreeNodeCustomData } from '../variable-tree/type';
+import { VariableTree } from '../variable-tree';
+import { VariableGroupParamHeader, useGetHideKeys } from './group-header';
+import { GroupCollapsibleWrapper } from './group-collapsible-wraper';
+
+interface IVariableGroupProps {
+  groupInfo: VariableGroupType;
+  readonly?: boolean;
+  validateExistKeyword?: boolean;
+  onVariableChange: (changeValue: TreeNodeCustomData) => void;
+}
+
+export const VariableGroup = (props: IVariableGroupProps) => {
+  const {
+    groupInfo,
+    readonly = true,
+    validateExistKeyword = false,
+    onVariableChange,
+  } = props;
+  const hideHeaderKeys = useGetHideKeys(groupInfo);
+  return (
+    <>
+      <GroupCollapsibleWrapper groupInfo={groupInfo}>
+        <VariableGroupParamHeader hideHeaderKeys={hideHeaderKeys} />
+        <div className="pl-6">
+          {groupInfo.subGroupList?.map(subGroup => (
+            <GroupCollapsibleWrapper groupInfo={subGroup} level={1}>
+              <VariableTree
+                hideHeaderKeys={hideHeaderKeys}
+                groupId={groupInfo.groupId}
+                value={subGroup.varInfoList ?? []}
+                readonly={readonly}
+                channel={subGroup.channel}
+                validateExistKeyword={validateExistKeyword}
+                onChange={onVariableChange}
+              />
+            </GroupCollapsibleWrapper>
+          ))}
+        </div>
+        <div className="flex flex-col pl-6">
+          <VariableTree
+            hideHeaderKeys={hideHeaderKeys}
+            groupId={groupInfo.groupId}
+            value={groupInfo.varInfoList ?? []}
+            readonly={readonly}
+            channel={groupInfo.channel}
+            validateExistKeyword={validateExistKeyword}
+            onChange={onVariableChange}
+          />
+        </div>
+      </GroupCollapsibleWrapper>
+    </>
+  );
+};