Merge pull request #227 from import-ai/feat/ai_tags_toggle

feat(option): Add AI tag extraction toggle for users

Author: LucienShui

src/i18n/locales/en.json

@@ -177,6 +177,7 @@
     "namespace": "Namespace",
     "api_key": "API Keys",
     "applications": "Applications",
+    "content": "Content",
     "third_party_account": {
       "manage": "Third-party",
       "title": "Third-party Account Management",
@@ -278,7 +279,9 @@
     "theme_setting": "Appearance",
     "theme_light": "Light",
     "theme_dark": "Dark",
-    "theme_system": "System"
+    "theme_system": "System",
+    "auto_tag_setting": "AI-Powered Tag Extraction",
+    "auto_tag_description": "Automatically extract and generate tags from content using AI"
   },
   "unauth_page": {
     "title": "Access Denied",

src/i18n/locales/zh.json

@@ -177,6 +177,7 @@
     "namespace": "空间设置",
     "api_key": "API 密钥",
     "applications": "应用管理",
+    "content": "内容",
     "third_party_account": {
       "manage": "三方账号管理",
       "title": "第三方账号管理",
@@ -278,7 +279,9 @@
     "theme_setting": "外观",
     "theme_light": "浅色",
     "theme_dark": "深色",
-    "theme_system": "系统"
+    "theme_system": "系统",
+    "auto_tag_setting": "AI 智能标签提取",
+    "auto_tag_description": "使用 AI 自动从内容中提取和生成标签"
   },
   "unauth_page": {
     "title": "访问被拒绝",

src/page/sidebar/switcher/content/auto-tag.tsx

@@ -0,0 +1,62 @@
+import { Tags } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Switch } from '@/components/ui/switch';
+import { http } from '@/lib/request';
+
+export default function AutoTag() {
+  const { t } = useTranslation();
+  const [isEnabled, setIsEnabled] = useState(true);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadPreference = async () => {
+      try {
+        const response = await http.get(
+          '/user/option/enable_ai_tag_extraction'
+        );
+        if (response.value !== undefined) {
+          setIsEnabled(response.value === 'true');
+        }
+      } catch {
+        // If option doesn't exist, default is enabled
+        setIsEnabled(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadPreference().then();
+  }, []);
+
+  const handleToggle = async (checked: boolean) => {
+    setIsEnabled(checked);
+    try {
+      await http.post('/user/option', {
+        name: 'enable_ai_tag_extraction',
+        value: checked ? 'true' : 'false',
+      });
+    } catch {
+      setIsEnabled(!checked);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Tags className="size-4" />
+          <span>{t('manage.auto_tag_setting')}</span>
+        </div>
+        <span className="text-xs text-muted-foreground ml-6">
+          {t('manage.auto_tag_description')}
+        </span>
+      </div>
+      <Switch
+        checked={isEnabled}
+        onCheckedChange={handleToggle}
+        disabled={loading}
+      />
+    </div>
+  );
+}

src/page/sidebar/switcher/content/index.tsx

@@ -0,0 +1,9 @@
+import AutoTag from './auto-tag';
+
+export default function Content() {
+  return (
+    <div className="flex flex-col gap-4">
+      <AutoTag />
+    </div>
+  );
+}

src/page/sidebar/switcher/swtting-wrapper.tsx

@@ -8,6 +8,7 @@ import { SidebarNav } from '@/page/user/form/sidebar';
 
 import { ApplicationsForm } from './applications';
 import CommonForm from './basic';
+import Content from './content';
 import { APIKeyForm } from './form/api-key';
 import ProfileForm from './form/profile';
 import SettingForm from './form/setting';
@@ -71,6 +72,11 @@ export default function SettingWrapper({
       value: 'basic',
       children: <CommonForm />,
     },
+    {
+      label: t('setting.content'),
+      value: 'content',
+      children: <Content />,
+    },
     {
       label: t('setting.third_party_account.manage'),
       value: 'third-party',