Fix: Modify the style of your personal center #10703 (#11487)

### What problem does this PR solve?

Modify the style of your personal center
Add resizable component

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/package-lock.json

@@ -86,6 +86,7 @@
         "react-infinite-scroll-component": "^6.1.0",
         "react-markdown": "^9.0.1",
         "react-pdf-highlighter": "^6.1.0",
+        "react-resizable-panels": "^3.0.6",
         "react-string-replace": "^1.1.1",
         "react-syntax-highlighter": "^15.5.0",
         "react18-json-view": "^0.2.8",
@@ -30306,6 +30307,16 @@
         }
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
+      "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-rnd": {
       "version": "10.4.1",
       "resolved": "https://registry.npmmirror.com/react-rnd/-/react-rnd-10.4.1.tgz",

web/package.json

@@ -99,6 +99,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",
     "react-pdf-highlighter": "^6.1.0",
+    "react-resizable-panels": "^3.0.6",
     "react-string-replace": "^1.1.1",
     "react-syntax-highlighter": "^15.5.0",
     "react18-json-view": "^0.2.8",

web/src/components/originui/select-with-search.tsx

@@ -219,7 +219,11 @@ export const SelectWithSearch = forwardRef<
                       value={group.value}
                       disabled={group.disabled}
                       onSelect={handleSelect}
-                      className="min-h-10"
+                      className={
+                        value === group.value
+                          ? 'bg-bg-card min-h-10'
+                          : 'min-h-10'
+                      }
                     >
                       <span className="leading-none">{group.label}</span>
 

web/src/components/similarity-slider/index.tsx

@@ -159,7 +159,7 @@ export function SimilaritySliderFormField({
               <FormControl>
                 <NumberInput
                   className={cn(
-                    'h-6 w-10 p-0 text-center bg-bg-input border-border-default border text-text-secondary',
+                    'h-6 w-10 p-0 text-center bg-bg-input border-border-button border text-text-secondary',
                     '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
                     numberInputClassName,
                   )}

web/src/components/slider-input-form-field.tsx

@@ -82,7 +82,7 @@ export function SliderInputFormField({
             <FormControl>
               <NumberInput
                 className={cn(
-                  'h-6 w-10 p-0 text-center bg-bg-input border border-border-default text-text-secondary',
+                  'h-6 w-10 p-0 text-center bg-bg-input border border-border-button text-text-secondary',
                   '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
                   numberInputClassName,
                 )}

web/src/components/ui/input.tsx

@@ -64,7 +64,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             className,
           )}
           style={{
-            paddingLeft: !!prefix ? `${prefixWidth}px` : '',
+            paddingLeft: !!prefix && prefixWidth ? `${prefixWidth}px` : '',
             paddingRight: isPasswordInput
               ? '40px'
               : !!suffix
@@ -144,7 +144,9 @@ export interface ExpandedInputProps extends InputProps {}
 const ExpandedInput = Input;
 
 const SearchInput = (props: InputProps) => {
-  return <Input {...props} prefix={<Search className="ml-3 size-[1em]" />} />;
+  return (
+    <Input {...props} prefix={<Search className="ml-2 mr-1 size-[1em]" />} />
+  );
 };
 
 type Value = string | readonly string[] | number | undefined;

web/src/components/ui/modal/modal.tsx

@@ -200,7 +200,7 @@ const Modal: ModalType = ({
                   <DialogPrimitive.Close asChild>
                     <button
                       type="button"
-                      className="flex h-7 w-7 items-center justify-center text-text-secondary rounded-full hover:bg-bg-card focus-visible:outline-none"
+                      className="flex h-7 w-7 items-center justify-center text-text-secondary rounded-full hover:text-text-primary focus-visible:outline-none"
                       onClick={handleCancel}
                     >
                       {closeIcon}

web/src/components/ui/resizable.tsx

@@ -0,0 +1,54 @@
+import { GripVerticalIcon } from 'lucide-react';
+import * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '@/lib/utils';
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

web/src/pages/user-setting/data-source/index.tsx

@@ -13,56 +13,16 @@ import { AddedSourceCard } from './component/added-source-card';
 import { DataSourceInfo, DataSourceKey } from './contant';
 import { useAddDataSource, useListDataSource } from './hooks';
 import { IDataSorceInfo } from './interface';
-const dataSourceTemplates = [
+
-  {
+const dataSourceTemplates = Object.values(DataSourceKey).map((id) => {
-    id: DataSourceKey.CONFLUENCE,
+  return {
-    name: DataSourceInfo[DataSourceKey.CONFLUENCE].name,
+    id,
-    description: DataSourceInfo[DataSourceKey.CONFLUENCE].description,
+    name: DataSourceInfo[id].name,
-    icon: DataSourceInfo[DataSourceKey.CONFLUENCE].icon,
+    description: DataSourceInfo[id].description,
-  },
+    icon: DataSourceInfo[id].icon,
-  {
+  };
-    id: DataSourceKey.S3,
+});
-    name: DataSourceInfo[DataSourceKey.S3].name,
+
-    description: DataSourceInfo[DataSourceKey.S3].description,
-    icon: DataSourceInfo[DataSourceKey.S3].icon,
-  },
-  {
-    id: DataSourceKey.GOOGLE_DRIVE,
-    name: DataSourceInfo[DataSourceKey.GOOGLE_DRIVE].name,
-    description: DataSourceInfo[DataSourceKey.GOOGLE_DRIVE].description,
-    icon: DataSourceInfo[DataSourceKey.GOOGLE_DRIVE].icon,
-  },
-  {
-    id: DataSourceKey.DISCORD,
-    name: DataSourceInfo[DataSourceKey.DISCORD].name,
-    description: DataSourceInfo[DataSourceKey.DISCORD].description,
-    icon: DataSourceInfo[DataSourceKey.DISCORD].icon,
-  },
-  {
-    id: DataSourceKey.NOTION,
-    name: DataSourceInfo[DataSourceKey.NOTION].name,
-    description: DataSourceInfo[DataSourceKey.NOTION].description,
-    icon: DataSourceInfo[DataSourceKey.NOTION].icon,
-  },
-  {
-    id: DataSourceKey.MOODLE,
-    name: DataSourceInfo[DataSourceKey.MOODLE].name,
-    description: DataSourceInfo[DataSourceKey.MOODLE].description,
-    icon: DataSourceInfo[DataSourceKey.MOODLE].icon,
-  },
-  {
-    id: DataSourceKey.JIRA,
-    name: DataSourceInfo[DataSourceKey.JIRA].name,
-    description: DataSourceInfo[DataSourceKey.JIRA].description,
-    icon: DataSourceInfo[DataSourceKey.JIRA].icon,
-  },
-  {
-    id: DataSourceKey.DROPBOX,
-    name: DataSourceInfo[DataSourceKey.DROPBOX].name,
-    description: DataSourceInfo[DataSourceKey.DROPBOX].description,
-    icon: DataSourceInfo[DataSourceKey.DROPBOX].icon,
-  },
-];
 const DataSource = () => {
   const { t } = useTranslation();
 

web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx

@@ -1,14 +1,8 @@
 import { Collapse } from '@/components/collapse';
 import { Button, ButtonLoading } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
+import { DialogClose, DialogFooter } from '@/components/ui/dialog';
-  Dialog,
+import { Modal } from '@/components/ui/modal/modal';
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { useGetMcpServer, useTestMcpServer } from '@/hooks/use-mcp-request';
 import { IModalProps } from '@/interfaces/common';
 import { IMCPTool, IMCPToolObject } from '@/interfaces/database/mcp';
@@ -114,50 +108,73 @@ export function EditMcpDialog({
   const disabled = !!!tools?.length || testLoading || fieldChanged;
 
   return (
-    <Dialog open onOpenChange={hideModal}>
+    // <Dialog open onOpenChange={hideModal}>
-      <DialogContent>
+    //   <DialogContent>
-        <DialogHeader>
+    //     <DialogHeader>
-          <DialogTitle>{id ? t('mcp.editMCP') : t('mcp.addMCP')}</DialogTitle>
+    //       <DialogTitle>{id ? t('mcp.editMCP') : t('mcp.addMCP')}</DialogTitle>
-        </DialogHeader>
+    //     </DialogHeader>
-        <EditMcpForm
+    //     <EditMcpForm
-          onOk={handleOk}
+    //       onOk={handleOk}
-          form={form}
+    //       form={form}
-          setFieldChanged={setFieldChanged}
+    //       setFieldChanged={setFieldChanged}
-        ></EditMcpForm>
+    //     ></EditMcpForm>
-        <Card className="bg-transparent">
+    //     <Card className="bg-transparent">
-          <CardContent className="p-3">
+    //       <CardContent className="p-3">
-            <Collapse
+    //         <Collapse
-              title={
+    //           title={
-                <div>
+    //             <div>
-                  {nextTools?.length || 0} {t('mcp.toolsAvailable')}
+    //               {nextTools?.length || 0} {t('mcp.toolsAvailable')}
-                </div>
+    //             </div>
-              }
+    //           }
-              open={collapseOpen}
+    //           open={collapseOpen}
-              onOpenChange={setCollapseOpen}
+    //           onOpenChange={setCollapseOpen}
-              rightContent={
+    //           rightContent={
-                <Button
+    //             <Button
-                  variant={'transparent'}
+    //               variant={'transparent'}
-                  form={FormId}
+    //               form={FormId}
-                  type="submit"
+    //               type="submit"
-                  onClick={handleTest}
+    //               onClick={handleTest}
-                  className="border-none p-0 hover:bg-transparent"
+    //               className="border-none p-0 hover:bg-transparent"
-                >
+    //             >
-                  <RefreshCw
+    //               <RefreshCw
-                    className={cn('text-text-secondary', {
+    //                 className={cn('text-text-secondary', {
-                      'animate-spin': testLoading,
+    //                   'animate-spin': testLoading,
-                    })}
+    //                 })}
-                  />
+    //               />
-                </Button>
+    //             </Button>
-              }
+    //           }
-            >
+    //         >
-              <div className="overflow-auto max-h-80 divide-y-[0.5px] divide-border-button bg-bg-card rounded-md px-2.5 scrollbar-auto">
+    //           <div className="overflow-auto max-h-80 divide-y-[0.5px] divide-border-button bg-bg-card rounded-md px-2.5 scrollbar-auto">
-                {nextTools?.map((x) => (
+    //             {nextTools?.map((x) => (
-                  <McpToolCard key={x.name} data={x}></McpToolCard>
+    //               <McpToolCard key={x.name} data={x}></McpToolCard>
-                ))}
+    //             ))}
-              </div>
+    //           </div>
-            </Collapse>
+    //         </Collapse>
-          </CardContent>
+    //       </CardContent>
-        </Card>
+    //     </Card>
+    //     <DialogFooter>
+    //       <DialogClose asChild>
+    //         <Button variant="outline">{t('common.cancel')}</Button>
+    //       </DialogClose>
+    //       <ButtonLoading
+    //         type="submit"
+    //         form={FormId}
+    //         loading={loading}
+    //         onClick={handleSave}
+    //         disabled={disabled}
+    //       >
+    //         {t('common.save')}
+    //       </ButtonLoading>
+    //     </DialogFooter>
+    //   </DialogContent>
+    // </Dialog>
+    <Modal
+      title={id ? t('mcp.editMCP') : t('mcp.addMCP')}
+      open={true}
+      onOpenChange={hideModal}
+      cancelText={t('common.cancel')}
+      okText={t('common.save')}
+      footer={
         <DialogFooter>
           <DialogClose asChild>
             <Button variant="outline">{t('common.cancel')}</Button>
@@ -172,7 +189,47 @@ export function EditMcpDialog({
             {t('common.save')}
           </ButtonLoading>
         </DialogFooter>
-      </DialogContent>
+      }
-    </Dialog>
+    >
+      <EditMcpForm
+        onOk={handleOk}
+        form={form}
+        setFieldChanged={setFieldChanged}
+      ></EditMcpForm>
+      <Card className="bg-transparent">
+        <CardContent className="p-3">
+          <Collapse
+            title={
+              <div>
+                {nextTools?.length || 0} {t('mcp.toolsAvailable')}
+              </div>
+            }
+            open={collapseOpen}
+            onOpenChange={setCollapseOpen}
+            rightContent={
+              <Button
+                variant={'transparent'}
+                form={FormId}
+                type="submit"
+                onClick={handleTest}
+                className="border-none p-0 text-text-secondary hover:bg-transparent hover:text-text-primary"
+              >
+                <RefreshCw
+                  className={cn({
+                    'animate-spin': testLoading,
+                  })}
+                />
+              </Button>
+            }
+          >
+            <div className="overflow-auto max-h-80 divide-y-[0.5px] divide-border-button bg-bg-card rounded-md px-2.5 scrollbar-auto">
+              {nextTools?.map((x) => (
+                <McpToolCard key={x.name} data={x}></McpToolCard>
+              ))}
+            </div>
+          </Collapse>
+        </CardContent>
+      </Card>
+    </Modal>
   );
 }

web/src/pages/user-setting/mcp/tool-card.tsx

@@ -7,7 +7,7 @@ export type McpToolCardProps = {
 export function McpToolCard({ data }: McpToolCardProps) {
   return (
     <section className="group py-2.5">
-      <h3 className="text-sm font-semibold line-clamp-1 pb-2">{data.name}</h3>
+      <div className="text-sm font-normal line-clamp-1 pb-2">{data.name}</div>
       <div className="text-xs font-normal text-text-secondary">
         {data.description}
       </div>

web/src/pages/user-setting/setting-model/components/system-setting.tsx

@@ -139,7 +139,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
   }) => {
     return (
       <div className="flex gap-3">
-        <label className="block text-sm font-medium text-text-secondary mb-1 w-1/4">
+        <label className="block text-sm font-normal text-text-secondary mb-1 w-1/4">
           {isRequired && <span className="text-red-500">*</span>}
           {label}
           {tooltip && (