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>

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

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,
         )}
       >

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)
+      }}
+    />
+  )
+}

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",