From abd0e28af733dfc62e5088e66409efd051fcfe29 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 12 Aug 2025 21:02:55 +0800
Subject: [PATCH] feat(ai): support switch ai panel style in ai setting

- Added a new PanelStyleSegment component to manage AI chat panel styles, allowing users to select between fixed and floating layouts.
- Updated localization files to include new strings for panel style settings.
- Refactored existing components to integrate the new panel style options, improving user configurability and experience.

These changes collectively enhance the flexibility and usability of the AI chat interface, providing users with better control over their layout preferences.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../components/layouts/ChatMoreDropdown.tsx   |  2 +-
 .../settings/modal/SettingModalContent.tsx    |  4 +-
 .../renderer/src/modules/settings/tabs/ai.tsx | 47 +++++++++++++++++--
 locales/ai/en.json                            |  8 +++-
 4 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatMoreDropdown.tsx b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatMoreDropdown.tsx
index 5102cc38a..5dc3497a1 100644
--- a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatMoreDropdown.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatMoreDropdown.tsx
@@ -174,7 +174,7 @@ export const ChatMoreDropdown = () => {
 
         <DropdownMenuItem onClick={handleToggleMode}>
           <i
-            className={`mr-2 size-4 ${panelStyle === AIChatPanelStyle.Fixed ? "i-mingcute-rectangle-vertical-line" : "i-mingcute-pin-line"}`}
+            className={`mr-2 size-4 ${panelStyle === AIChatPanelStyle.Fixed ? "i-mingcute-rectangle-vertical-line" : "i-mingcute-layout-right-line"}`}
           />
           <span>
             {panelStyle === AIChatPanelStyle.Fixed
diff --git a/apps/desktop/layer/renderer/src/modules/settings/modal/SettingModalContent.tsx b/apps/desktop/layer/renderer/src/modules/settings/modal/SettingModalContent.tsx
index 603dca129..11a83d72b 100644
--- a/apps/desktop/layer/renderer/src/modules/settings/modal/SettingModalContent.tsx
+++ b/apps/desktop/layer/renderer/src/modules/settings/modal/SettingModalContent.tsx
@@ -50,9 +50,9 @@ const Content = () => {
       <ScrollArea.ScrollArea
         mask={false}
         ref={setScroller}
-        rootClassName="h-full grow flex-1 shrink-0 overflow-auto pl-8 pr-7"
+        rootClassName="h-full grow flex-1 shrink-0 overflow-auto"
         viewportClassName={cn(
-          "px-1 min-h-full [&>div]:min-h-full [&>div]:relative",
+          "px-1 min-h-full [&>div]:min-h-full [&>div]:relative pl-8 pr-7",
           config.viewportClassName,
         )}
       >
diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/ai.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/ai.tsx
index 3c10ce130..8b2dcaebf 100644
--- a/apps/desktop/layer/renderer/src/modules/settings/tabs/ai.tsx
+++ b/apps/desktop/layer/renderer/src/modules/settings/tabs/ai.tsx
@@ -8,9 +8,15 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
-import { setAISetting, useAISettingValue } from "~/atoms/settings/ai"
+import {
+  AIChatPanelStyle,
+  setAIChatPanelStyle,
+  setAISetting,
+  useAIChatPanelStyle,
+  useAISettingValue,
+} from "~/atoms/settings/ai"
 
-import { SettingActionItem, SettingDescription } from "../control"
+import { SettingActionItem, SettingDescription, SettingTabbedSegment } from "../control"
 import { createDefineSettingItem } from "../helper/builder"
 import { createSettingBuilder } from "../helper/setting-builder"
 
@@ -28,9 +34,11 @@ export const SettingAI = () => {
             type: "title",
             value: t("features.title"),
           },
+
+          PanelStyleSegment,
           defineSettingItem("autoScrollWhenStreaming", {
-            label: t("autoScrollWhenStreaming.label"),
-            description: t("autoScrollWhenStreaming.description"),
+            label: t("settings.autoScrollWhenStreaming.label"),
+            description: t("settings.autoScrollWhenStreaming.description"),
           }),
 
           {
@@ -87,7 +95,7 @@ const PersonalizePromptSetting = () => {
     <div className="space-y-4">
       <div className="space-y-2">
         <Label className="text-text text-sm font-medium">{t("personalize.prompt.label")}</Label>
-        <div className="relative">
+        <div className="relative -mx-3">
           <TextArea
             value={prompt}
             onChange={handlePromptChange}
@@ -378,3 +386,32 @@ const ShortcutEditor = ({ shortcut, onSave, onCancel }: ShortcutEditorProps) =>
     </div>
   )
 }
+
+export const PanelStyleSegment = () => {
+  const { t } = useTranslation("ai")
+  const panelStyle = useAIChatPanelStyle()
+
+  return (
+    <SettingTabbedSegment
+      key="panel-style"
+      label={t("settings.panel_style.label")}
+      description={t("settings.panel_style.description")}
+      value={panelStyle}
+      values={[
+        {
+          value: AIChatPanelStyle.Fixed,
+          label: t("settings.panel_style.fixed"),
+          icon: <i className="i-mingcute-rectangle-vertical-line" />,
+        },
+        {
+          value: AIChatPanelStyle.Floating,
+          label: t("settings.panel_style.floating"),
+          icon: <i className="i-mingcute-layout-right-line" />,
+        },
+      ]}
+      onValueChanged={(value) => {
+        setAIChatPanelStyle(value as AIChatPanelStyle)
+      }}
+    />
+  )
+}
diff --git a/locales/ai/en.json b/locales/ai/en.json
index ff70c3a0f..dee697d38 100644
--- a/locales/ai/en.json
+++ b/locales/ai/en.json
@@ -1,6 +1,4 @@
 {
-  "autoScrollWhenStreaming.description": "Automatically scroll to the bottom of the chat when streaming",
-  "autoScrollWhenStreaming.label": "Auto scroll when streaming",
   "clear_chat": "Clear Chat",
   "clear_chat_message": "Are you sure you want to clear all history? This action will permanently delete all content, including all chat logs and data, and cannot be undone.",
   "delete_chat": "Delete Chat",
@@ -17,7 +15,13 @@
   "personalize.prompt.placeholder": "Tell me about yourself and how you prefer to read content...",
   "personalize.saved": "Personalization saved successfully",
   "personalize.title": "Personalization",
+  "settings.autoScrollWhenStreaming.description": "Automatically scroll to the bottom of the chat when streaming",
+  "settings.autoScrollWhenStreaming.label": "Auto scroll when streaming",
   "settings.description": "Configure your AI experience and create custom shortcuts",
+  "settings.panel_style.description": "The style of the AI chat panel",
+  "settings.panel_style.fixed": "Fixed",
+  "settings.panel_style.floating": "Floating",
+  "settings.panel_style.label": "Panel Style",
   "settings.title": "AI Settings",
   "shortcuts.add": "Add Shortcut",
   "shortcuts.added": "Shortcut added successfully",