Fix(dataset): Optimized the dataset configuration page UI #9869 (#10066)

### What problem does this PR solve?
fix(dataset): Optimized the dataset configuration page UI

- Added the DataPipelineSelect component for selecting data pipelines
- Restructured the layout and style of the dataset settings page
- Removed unnecessary components and code
- Optimized data pipeline configuration
- Adjusted the Create Dataset dialog box
- Updated the processing log modal style

### Type of change

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

web/src/components/data-pipeline-select/index.tsx

@@ -0,0 +1,76 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { buildSelectOptions } from '@/utils/component-util';
+import { ArrowUpRight } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { RAGFlowSelect } from '../ui/select';
+
+interface IProps {
+  toDataPipeline?: () => void;
+  formFieldName: string;
+}
+
+const data = [
+  { id: '1', name: 'data-pipeline-1' },
+  { id: '2', name: 'data-pipeline-2' },
+  { id: '3', name: 'data-pipeline-3' },
+  { id: '4', name: 'data-pipeline-4' },
+];
+export function DataFlowItem(props: IProps) {
+  const { toDataPipeline, formFieldName } = props;
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+  const toDataPipLine = () => {
+    // window.open('/data-pipeline');
+
+    toDataPipeline?.();
+  };
+  const options = buildSelectOptions(data, 'id', 'name');
+  return (
+    <FormField
+      control={form.control}
+      name={formFieldName}
+      render={({ field }) => (
+        <FormItem className=" items-center space-y-0 ">
+          <div className="flex flex-col gap-1">
+            <div className="flex gap-2 justify-between ">
+              <FormLabel
+                tooltip={t('dataFlowTip')}
+                className="text-sm text-text-primary whitespace-wrap "
+              >
+                {t('dataFlow')}
+              </FormLabel>
+              <div
+                className="text-sm flex text-text-primary cursor-pointer"
+                onClick={toDataPipLine}
+              >
+                {t('buildItFromScratch')}
+                <ArrowUpRight size={14} />
+              </div>
+            </div>
+
+            <div className="text-muted-foreground">
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  placeholder={t('dataFlowPlaceholder')}
+                  options={options}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+}

web/src/components/ragflow-form.tsx

@@ -16,6 +16,7 @@ type RAGFlowFormItemProps = {
   children: ReactNode | ((field: ControllerRenderProps) => ReactNode);
   horizontal?: boolean;
   required?: boolean;
+  labelClassName?: string;
 };
 
 export function RAGFlowFormItem({
@@ -25,6 +26,7 @@ export function RAGFlowFormItem({
   children,
   horizontal = false,
   required = false,
+  labelClassName,
 }: RAGFlowFormItemProps) {
   const form = useFormContext();
   return (
@@ -40,7 +42,7 @@ export function RAGFlowFormItem({
           <FormLabel
             required={required}
             tooltip={tooltip}
-            className={cn({ 'w-1/4': horizontal })}
+            className={cn({ 'w-1/4': horizontal }, labelClassName)}
           >
             {label}
           </FormLabel>

web/src/locales/en.ts

@@ -261,12 +261,13 @@ export default {
       reRankModelWaring: 'Re-rank model is very time consuming.',
     },
     knowledgeConfiguration: {
+      default: 'Default',
+      dataPipeline: 'Data Pipeline',
+      linkDataPipeline: 'Link Data Pipeline',
       enableAutoGenerate: 'Enable Auto Generate',
       teamPlaceholder: 'Please select a team.',
       dataFlowPlaceholder: 'Please select a data flow.',
       buildItFromScratch: 'Build it from scratch',
-      useRAPTORToEnhanceRetrieval: 'Use RAPTOR to Enhance Retrieval',
-      extractKnowledgeGraph: 'Extract Knowledge Graph',
       dataFlow: 'Data Flow',
       parseType: 'Parse Type',
       manualSetup: 'Manual Setup',

web/src/locales/zh.ts

@@ -246,12 +246,13 @@ export default {
       theDocumentBeingParsedCannotBeDeleted: '正在解析的文档不能被删除',
     },
     knowledgeConfiguration: {
+      default: '默认',
+      dataPipeline: '数据流',
+      linkDataPipeline: '关联数据流',
       enableAutoGenerate: '是否启用自动生成',
       teamPlaceholder: '请选择团队',
       dataFlowPlaceholder: '请选择数据流',
       buildItFromScratch: '去Scratch构建',
-      useRAPTORToEnhanceRetrieval: '使用 RAPTOR 提升检索效果',
-      extractKnowledgeGraph: '知识图谱提取',
       dataFlow: '数据流',
       parseType: '切片方法',
       manualSetup: '手动设置',

web/src/pages/dataset/dataset-overview/overview-table.tsx

@@ -317,7 +317,8 @@ const FileLogsTable: FC<FileLogsTableProps> = ({
     state: 'Running',
     startTime: '14/03/2025 14:53:39',
     duration: '800',
-    details: 'PRD for DealBees 1.2 (1).text',
+    details:
+      '\n17:43:21 Task has been received.\n17:43:25 Page(1~100000001): Start to parse.\n17:43:25 Page(1~100000001): Start to tag for every chunk ...\n17:43:45 Page(1~100000001): Tagging 2 chunks completed in 18.99s\n17:43:45 Page(1~100000001): Generate 2 chunks\n17:43:55 Page(1~100000001): Embedding chunks (10.60s)\n17:43:55 Page(1~100000001): Indexing done (0.07s). Task done (33.97s)\n17:43:58 created task raptor\n17:43:58 Task has been received.\n17:44:36 Cluster one layer: 2 -> 1\n17:44:36 Indexing done (0.05s). Task done (37.88s)\n17:44:40 created task graphrag\n17:44:41 Task has been received.\n17:50:57 Entities extraction of chunk 0 1/3 done, 25 nodes, 26 edges, 14893 tokens.\n17:56:01 [ERROR][Exception]: Operation timed out after 7200 seconds and 1 attempts.',
   };
   return (
     <div className="w-full h-[calc(100vh-350px)]">

web/src/pages/dataset/dataset-setting/chunk-method-form.tsx

@@ -1,31 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-
-import { NaiveConfiguration } from './naive';
-import { SavingButton } from './saving-button';
-
-export function ChunkMethodForm() {
-  const form = useFormContext();
-  const { t } = useTranslation();
-
-  return (
-    <section className="h-full flex flex-col">
-      <div className="overflow-auto flex-1 min-h-0">
-        <NaiveConfiguration></NaiveConfiguration>
-      </div>
-      <div className="text-right pt-4 flex justify-end gap-3">
-        <Button
-          type="reset"
-          className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
-          onClick={() => {
-            form.reset();
-          }}
-        >
-          {t('knowledgeConfiguration.cancel')}
-        </Button>
-        <SavingButton></SavingButton>
-      </div>
-    </section>
-  );
-}

web/src/pages/dataset/dataset-setting/components/link-data-pipeline.tsx

@@ -0,0 +1,79 @@
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { Button } from '@/components/ui/button';
+import { Link, Route, Settings2, Unlink } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface DataPipelineItemProps {
+  name: string;
+  avatar?: string;
+  isDefault?: boolean;
+  linked?: boolean;
+}
+const DataPipelineItem = (props: DataPipelineItemProps) => {
+  const { t } = useTranslation();
+  const { name, avatar, isDefault, linked } = props;
+  return (
+    <div className="flex items-center justify-between gap-1 px-2 rounded-lg border">
+      <div className="flex items-center gap-1">
+        <RAGFlowAvatar avatar={avatar} name={name} className="size-4" />
+        <div>{name}</div>
+        {isDefault && (
+          <div className="text-xs bg-text-secondary text-bg-base px-2 py-1 rounded-md">
+            {t('knowledgeConfiguration.default')}
+          </div>
+        )}
+      </div>
+      <div className="flex gap-1 items-center">
+        <Button variant={'transparent'} className="border-none">
+          <Settings2 />
+        </Button>
+        <Button variant={'transparent'} className="border-none">
+          {linked ? <Link /> : <Unlink />}
+        </Button>
+      </div>
+    </div>
+  );
+};
+const LinkDataPipeline = () => {
+  const { t } = useTranslation();
+  const testNode = [
+    {
+      name: 'Data Pipeline 1',
+      avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
+      isDefault: true,
+      linked: true,
+    },
+    {
+      name: 'Data Pipeline 2',
+      avatar: 'https://avatars.githubusercontent.com/u/10656201?v=4',
+      linked: false,
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-2">
+      <section className="flex flex-col">
+        <div className="flex items-center gap-1 text-text-primary text-sm">
+          <Route className="size-4" />
+          {t('knowledgeConfiguration.dataPipeline')}
+        </div>
+        <div className="flex justify-between items-center">
+          <div className="text-center text-xs text-text-secondary">
+            Manage data pipeline linkage with this dataset
+          </div>
+          <Button variant={'transparent'}>
+            <Link />
+            <span className="text-xs text-text-primary">
+              {t('knowledgeConfiguration.linkDataPipeline')}
+            </span>
+          </Button>
+        </div>
+      </section>
+      <section className="flex flex-col gap-2">
+        {testNode.map((item) => (
+          <DataPipelineItem key={item.name} {...item} />
+        ))}
+      </section>
+    </div>
+  );
+};
+export default LinkDataPipeline;

web/src/pages/dataset/dataset-setting/configuration/common-item.tsx

@@ -10,7 +10,6 @@ import { RAGFlowSelect } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { useTranslate } from '@/hooks/common-hooks';
 import { cn } from '@/lib/utils';
-import { ArrowUpRight } from 'lucide-react';
 import { useFormContext } from 'react-hook-form';
 import {
   useHasParsedDocument,
@@ -70,8 +69,13 @@ export function EmbeddingModelItem({ line = 1 }: { line?: 1 | 2 }) {
       control={form.control}
       name={'embd_id'}
       render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className={cn({ 'flex items-center': line === 1 })}>
+        <FormItem className={cn(' items-center space-y-0 ')}>
+          <div
+            className={cn('flex', {
+              ' items-center': line === 1,
+              'flex-col gap-1': line === 2,
+            })}
+          >
             <FormLabel
               required
               tooltip={t('embeddingModelTip')}
@@ -142,155 +146,6 @@ export function ParseTypeItem() {
   );
 }
 
-export function DataFlowItem() {
-  const { t } = useTranslate('knowledgeConfiguration');
-  const form = useFormContext();
-
-  return (
-    <FormField
-      control={form.control}
-      name={'data_flow'}
-      render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className="">
-            <div className="flex gap-2 justify-between ">
-              <FormLabel
-                tooltip={t('dataFlowTip')}
-                className="text-sm text-text-primary whitespace-wrap "
-              >
-                {t('dataFlow')}
-              </FormLabel>
-              <div className="text-sm flex text-text-primary">
-                {t('buildItFromScratch')}
-                <ArrowUpRight size={14} />
-              </div>
-            </div>
-
-            <div className="text-muted-foreground">
-              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  placeholder={t('dataFlowPlaceholder')}
-                  options={[{ value: '0', label: t('dataFlowDefault') }]}
-                />
-              </FormControl>
-            </div>
-          </div>
-          <div className="flex pt-1">
-            <div className="w-1/4"></div>
-            <FormMessage />
-          </div>
-        </FormItem>
-      )}
-    />
-  );
-}
-
-export function DataExtractKnowledgeItem() {
-  const { t } = useTranslate('knowledgeConfiguration');
-  const form = useFormContext();
-
-  return (
-    <>
-      {' '}
-      <FormField
-        control={form.control}
-        name={'extractKnowledgeGraph'}
-        render={({ field }) => (
-          <FormItem className=" items-center space-y-0 ">
-            <div className="">
-              <FormLabel
-                tooltip={t('extractKnowledgeGraphTip')}
-                className="text-sm  whitespace-wrap "
-              >
-                {t('extractKnowledgeGraph')}
-              </FormLabel>
-              <div className="text-muted-foreground">
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                </FormControl>
-              </div>
-            </div>
-            <div className="flex pt-1">
-              <div className="w-1/4"></div>
-              <FormMessage />
-            </div>
-          </FormItem>
-        )}
-      />{' '}
-      <FormField
-        control={form.control}
-        name={'useRAPTORToEnhanceRetrieval'}
-        render={({ field }) => (
-          <FormItem className=" items-center space-y-0 ">
-            <div className="">
-              <FormLabel
-                tooltip={t('useRAPTORToEnhanceRetrievalTip')}
-                className="text-sm  whitespace-wrap "
-              >
-                {t('useRAPTORToEnhanceRetrieval')}
-              </FormLabel>
-              <div className="text-muted-foreground">
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                </FormControl>
-              </div>
-            </div>
-            <div className="flex pt-1">
-              <div className="w-1/4"></div>
-              <FormMessage />
-            </div>
-          </FormItem>
-        )}
-      />
-    </>
-  );
-}
-
-export function TeamItem() {
-  const { t } = useTranslate('knowledgeConfiguration');
-  const form = useFormContext();
-
-  return (
-    <FormField
-      control={form.control}
-      name={'team'}
-      render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className="">
-            <FormLabel
-              tooltip={t('teamTip')}
-              className="text-sm  whitespace-wrap "
-            >
-              <span className="text-destructive mr-1"> *</span>
-              {t('team')}
-            </FormLabel>
-            <div className="text-muted-foreground">
-              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  placeholder={t('teamPlaceholder')}
-                  options={[{ value: '0', label: t('teamDefault') }]}
-                />
-              </FormControl>
-            </div>
-          </div>
-          <div className="flex pt-1">
-            <div className="w-1/4"></div>
-            <FormMessage />
-          </div>
-        </FormItem>
-      )}
-    />
-  );
-}
-
 export function EnableAutoGenerateItem() {
   const { t } = useTranslate('knowledgeConfiguration');
   const form = useFormContext();

web/src/pages/dataset/dataset-setting/general-form.tsx

@@ -17,7 +17,7 @@ export function GeneralForm() {
   const { t } = useTranslation();
 
   return (
-    <section className="space-y-4">
+    <>
       <FormField
         control={form.control}
         name="name"
@@ -87,6 +87,6 @@ export function GeneralForm() {
       />
       <PermissionFormField></PermissionFormField>
       <EmbeddingModelItem></EmbeddingModelItem>
-    </section>
+    </>
   );
 }

web/src/pages/dataset/dataset-setting/index.tsx

@@ -1,3 +1,6 @@
+import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
+import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
+import { Button } from '@/components/ui/button';
 import Divider from '@/components/ui/divider';
 import { Form } from '@/components/ui/form';
 import { DocumentParserType } from '@/constants/knowledge';
@@ -7,11 +10,12 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { TopTitle } from '../dataset-title';
-import { ChunkMethodForm } from './chunk-method-form';
+import LinkDataPipeline from './components/link-data-pipeline';
+import { MainContainer } from './configuration-form-container';
 import { formSchema } from './form-schema';
 import { GeneralForm } from './general-form';
 import { useFetchKnowledgeConfigurationOnMount } from './hooks';
-
+import { SavingButton } from './saving-button';
 const enum DocumentType {
   DeepDOC = 'DeepDOC',
   PlainText = 'Plain Text',
@@ -77,10 +81,29 @@ export default function DatasetSettings() {
             onSubmit={form.handleSubmit(onSubmit)}
             className="space-y-6 flex-1"
           >
-            <div className="w-[768px] h-[calc(100vh-220px)] overflow-y-auto scrollbar-thin">
-              <GeneralForm></GeneralForm>
-              <Divider />
-              <ChunkMethodForm></ChunkMethodForm>
+            <div className="w-[768px] h-[calc(100vh-240px)] pr-1 overflow-y-auto scrollbar-auto">
+              <MainContainer>
+                <GeneralForm></GeneralForm>
+                <Divider />
+
+                <GraphRagItems className="border-none p-0"></GraphRagItems>
+                <Divider />
+                <RaptorFormFields></RaptorFormFields>
+                <Divider />
+                <LinkDataPipeline />
+              </MainContainer>
+            </div>
+            <div className="text-right items-center flex justify-end gap-3 w-[768px]">
+              <Button
+                type="reset"
+                className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
+                onClick={() => {
+                  form.reset();
+                }}
+              >
+                {t('knowledgeConfiguration.cancel')}
+              </Button>
+              <SavingButton></SavingButton>
             </div>
           </form>
         </Form>

web/src/pages/dataset/dataset-setting/naive.tsx

@@ -1,20 +0,0 @@
-import GraphRagItems from '@/components/parse-configuration/graph-rag-form-fields';
-import RaptorFormFields from '@/components/parse-configuration/raptor-form-fields';
-import Divider from '@/components/ui/divider';
-import {
-  ConfigurationFormContainer,
-  MainContainer,
-} from './configuration-form-container';
-
-export function NaiveConfiguration() {
-  return (
-    <MainContainer>
-      <GraphRagItems className="border-none p-0"></GraphRagItems>
-      <Divider />
-      <ConfigurationFormContainer>
-        <RaptorFormFields></RaptorFormFields>
-      </ConfigurationFormContainer>
-      <Divider />
-    </MainContainer>
-  );
-}

web/src/pages/datasets/dataset-creating-dialog.tsx

@@ -1,3 +1,4 @@
+import { DataFlowItem } from '@/components/data-pipeline-select';
 import { ButtonLoading } from '@/components/ui/button';
 import {
   Dialog,
@@ -15,17 +16,15 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import {
-  DataExtractKnowledgeItem,
-  DataFlowItem,
   EmbeddingModelItem,
   ParseTypeItem,
-  TeamItem,
 } from '../dataset/dataset-setting/configuration/common-item';
 
 const FormId = 'dataset-creating-form';
@@ -58,6 +57,7 @@ export function InputForm({ onOk }: IModalProps<any>) {
     control: form.control,
     name: 'parseType',
   });
+  const { navigateToAgents } = useNavigatePage();
   return (
     <Form {...form}>
       <form
@@ -88,9 +88,10 @@ export function InputForm({ onOk }: IModalProps<any>) {
         <ParseTypeItem />
         {parseType === 2 && (
           <>
-            <DataFlowItem />
-            <DataExtractKnowledgeItem />
-            <TeamItem />
+            <DataFlowItem
+              toDataPipeline={navigateToAgents}
+              formFieldName="data_flow"
+            />
           </>
         )}
       </form>

web/src/pages/datasets/process-log-modal.tsx

@@ -1,7 +1,9 @@
+import FileStatusBadge from '@/components/file-status-badge';
 import { Button } from '@/components/ui/button';
 import { Modal } from '@/components/ui/modal/modal';
 import { useTranslate } from '@/hooks/common-hooks';
 import React from 'react';
+import reactStringReplace from 'react-string-replace';
 
 interface ProcessLogModalProps {
   visible: boolean;
@@ -12,7 +14,7 @@ interface ProcessLogModalProps {
     fileSize: string;
     source: string;
     task: string;
-    state: 'Running' | 'Completed' | 'Failed' | 'Pending';
+    state: 'Running' | 'Success' | 'Failed' | 'Pending';
     startTime: string;
     endTime?: string;
     duration?: string;
@@ -20,32 +22,6 @@ interface ProcessLogModalProps {
   };
 }
 
-const StatusTag: React.FC<{ state: string }> = ({ state }) => {
-  const getTagStyle = () => {
-    switch (state) {
-      case 'Running':
-        return 'bg-green-500 text-green-100';
-      case 'Completed':
-        return 'bg-blue-500 text-blue-100';
-      case 'Failed':
-        return 'bg-red-500 text-red-100';
-      case 'Pending':
-        return 'bg-yellow-500 text-yellow-100';
-      default:
-        return 'bg-gray-500 text-gray-100';
-    }
-  };
-
-  return (
-    <span
-      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getTagStyle()}`}
-    >
-      <span className="w-1.5 h-1.5 rounded-full mr-1 bg-current"></span>
-      {state}
-    </span>
-  );
-};
-
 const InfoItem: React.FC<{
   label: string;
   value: string | React.ReactNode;
@@ -65,6 +41,24 @@ const ProcessLogModal: React.FC<ProcessLogModalProps> = ({
   taskInfo,
 }) => {
   const { t } = useTranslate('knowledgeDetails');
+  const replaceText = (text: string) => {
+    // Remove duplicate \n
+    const nextText = text.replace(/(\n)\1+/g, '$1');
+
+    const replacedText = reactStringReplace(
+      nextText,
+      /(\[ERROR\].+\s)/g,
+      (match, i) => {
+        return (
+          <span key={i} className={'text-red-600'}>
+            {match}
+          </span>
+        );
+      },
+    );
+
+    return replacedText;
+  };
   return (
     <Modal
       title={t('processLog')}
@@ -86,15 +80,14 @@ const ProcessLogModal: React.FC<ProcessLogModalProps> = ({
             <InfoItem label="File Size" value={taskInfo.fileSize} />
             <InfoItem label="Source" value={taskInfo.source} />
             <InfoItem label="Task" value={taskInfo.task} />
-            <InfoItem label="Details" value={taskInfo.details} />
           </div>
 
           {/* Right Column */}
           <div className="space-y-4">
             <div className="flex flex-col">
-              <span className="text-text-secondary text-sm">States</span>
+              <span className="text-text-secondary text-sm">Status</span>
               <div className="mt-1">
-                <StatusTag state={taskInfo.state} />
+                <FileStatusBadge status={taskInfo.state} />
               </div>
             </div>
 
@@ -108,6 +101,17 @@ const ProcessLogModal: React.FC<ProcessLogModalProps> = ({
             />
           </div>
         </div>
+        {/* <InfoItem label="Details" value={taskInfo.details} /> */}
+        <div>
+          <div>Details</div>
+          <div>
+            <ul className="space-y-2">
+              <div className={'w-full  whitespace-pre-line text-wrap '}>
+                {replaceText(taskInfo.details)}
+              </div>
+            </ul>
+          </div>
+        </div>
       </div>
     </Modal>
   );

web/src/utils/component-util.ts

@@ -1,3 +1,10 @@
-export function buildSelectOptions(list: Array<string>) {
+export function buildSelectOptions(
+  list: Array<any>,
+  keyName?: string,
+  valueName?: string,
+) {
+  if (keyName && valueName) {
+    return list.map((x) => ({ label: x[valueName], value: x[keyName] }));
+  }
   return list.map((x) => ({ label: x, value: x }));
 }

web/tailwind.css

@@ -291,8 +291,8 @@
 @layer utilities {
   .scrollbar-auto {
     /* hide scrollbar */
-    scrollbar-width: none;
-    scrollbar-color: transparent transparent;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-default) var(--bg-card);
   }
 
   .scrollbar-auto::-webkit-scrollbar {