feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/memory/variables/src/hooks/life-cycle/use-destory.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { useEffect } from 'react';
+
+import { useVariableGroupsStore } from '../../store';
+
+export const useDestory = () => {
+  const { clear } = useVariableGroupsStore();
+  useEffect(
+    () => () => {
+      clear();
+    },
+    [clear],
+  );
+  return {
+    clear,
+  };
+};

frontend/packages/data/memory/variables/src/hooks/life-cycle/use-init.ts

@@ -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 { useEffect } from 'react';
+
+import { useRequest } from 'ahooks';
+import { I18n } from '@coze-arch/i18n';
+import { CustomError } from '@coze-arch/bot-error';
+import { type project_memory as ProjectMemory } from '@coze-arch/bot-api/memory';
+import { MemoryApi } from '@coze-arch/bot-api';
+import { Toast } from '@coze-arch/coze-design';
+
+import { useVariableGroupsStore } from '../../store';
+
+export const useInit = (projectID?: string, version?: string) => {
+  const { data: reqData, loading } = useGetVariableList(projectID, version);
+  const { initStore } = useVariableGroupsStore();
+
+  useEffect(() => {
+    if (loading) {
+      return;
+    }
+
+    const { variableGroups, canEdit } = reqData;
+
+    initStore({
+      variableGroups,
+      canEdit: canEdit && !version,
+    });
+  }, [loading]);
+
+  return {
+    loading,
+  };
+};
+
+const useGetVariableList = (
+  projectID?: string,
+  version?: string,
+): {
+  data: {
+    variableGroups: ProjectMemory.GroupVariableInfo[];
+    canEdit: boolean;
+  };
+  loading: boolean;
+  error: string;
+} => {
+  const {
+    data: reqData,
+    loading,
+    error,
+  } = useRequest(
+    async () => {
+      if (!projectID) {
+        throw new CustomError(
+          'useListDataSetReq_error',
+          'projectID cannot be empty',
+        );
+      }
+      const res = await MemoryApi.GetProjectVariableList({
+        ProjectID: projectID,
+        version: version || undefined,
+      });
+
+      const { GroupConf, code, CanEdit: canEdit, msg } = res;
+
+      if (code !== 0) {
+        return {
+          error: msg,
+          data: {
+            variableGroups: [],
+            canEdit: false,
+          },
+          loading: false,
+        };
+      }
+
+      if (!GroupConf) {
+        return {
+          data: {
+            variableGroups: [],
+            canEdit,
+          },
+          loading: false,
+        };
+      }
+
+      return {
+        variableGroups: GroupConf,
+        canEdit,
+      };
+    },
+    {
+      manual: false,
+      onError: () => {
+        Toast.error({
+          content: I18n.t('Network_error'),
+          showClose: false,
+        });
+      },
+    },
+  );
+  return {
+    data: {
+      variableGroups: reqData?.variableGroups ?? [],
+      canEdit: reqData?.canEdit ?? false,
+    },
+    loading,
+    error: error?.message ?? '',
+  };
+};

frontend/packages/data/memory/variables/src/hooks/use-case/use-change-warning.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 { useState } from 'react';
+
+import { useHiddenSession } from '@/hooks/use-case/use-hidden-session';
+
+export const useChangeWarning = () => {
+  const [isShowBanner, setIsShowBanner] = useState(false);
+  const { isSessionHidden, hideSession } = useHiddenSession(
+    'variable_config_change_banner_remind',
+  );
+
+  const showBanner = () => {
+    setIsShowBanner(true);
+  };
+
+  const hideBanner = () => {
+    setIsShowBanner(false);
+  };
+
+  const hideBannerForever = () => {
+    hideSession();
+    setIsShowBanner(false);
+  };
+
+  return {
+    isShowBanner: isShowBanner && !isSessionHidden,
+    showBanner,
+    hideBanner,
+    hideBannerForever,
+  };
+};

frontend/packages/data/memory/variables/src/hooks/use-case/use-hidden-session.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 { useState } from 'react';
+
+import { localStorageService } from '@coze-foundation/local-storage';
+
+const SESSION_HIDDEN_KEY = 'coze-home-session-area-hidden-key';
+
+export const useHiddenSession = (key: string) => {
+  const [isSessionHidden, setIsSessionHidden] = useState(isKeyExist(key));
+  return {
+    isSessionHidden,
+    hideSession: () => {
+      if (isKeyExist(key)) {
+        return;
+      }
+      const oldValue = localStorageService.getValue(SESSION_HIDDEN_KEY) || '';
+      localStorageService.setValue(
+        SESSION_HIDDEN_KEY,
+        oldValue ? `${oldValue},${key}` : key,
+      );
+      setIsSessionHidden(true);
+    },
+  };
+};
+
+const isKeyExist = (key: string) => {
+  const oldValue = localStorageService.getValue(SESSION_HIDDEN_KEY);
+  return oldValue?.includes(key);
+};

frontend/packages/data/memory/variables/src/hooks/use-case/use-leave-waring.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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 { useLocation } from 'react-router-dom';
+import { useEffect, useRef, useState } from 'react';
+
+import { useDataNavigate } from '@coze-data/knowledge-stores';
+import { I18n } from '@coze-arch/i18n';
+import { Button, Toast } from '@coze-arch/coze-design';
+
+export const useLeaveWarning = () => {
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const location = useLocation();
+  const prevPathRef = useRef(location.pathname);
+  const resourceNavigate = useDataNavigate();
+
+  useEffect(() => {
+    const currentPath = location.pathname;
+    const wasInVariablePage = prevPathRef.current.includes('/variables');
+
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges) {
+        e.preventDefault();
+      }
+    };
+
+    if (
+      wasInVariablePage &&
+      !currentPath.includes('/variables') &&
+      hasUnsavedChanges
+    ) {
+      Toast.warning({
+        content: (
+          <div>
+            <span className="text-sm font-medium coz-fg-plus mr-2">
+              {I18n.t('variable_config_toast_savetips')}
+            </span>
+            <Button
+              color="primary"
+              onClick={() => {
+                resourceNavigate.navigateTo?.('/variables');
+              }}
+            >
+              {I18n.t('variable_config_toast_return_button')}
+            </Button>
+          </div>
+        ),
+      });
+    }
+
+    if (currentPath.includes('/variables') && hasUnsavedChanges) {
+      window.addEventListener('beforeunload', handleBeforeUnload);
+    }
+
+    prevPathRef.current = currentPath;
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [location, hasUnsavedChanges]);
+
+  return {
+    hasUnsavedChanges,
+    setHasUnsavedChanges,
+  };
+};