Merge branch 'rc/new-plugin' into refactor/new-plugin-system

web/src/app/home/pipelines/PipelineDetailDialog.tsx

@@ -18,7 +18,6 @@ import {
 } from '@/components/ui/sidebar';
 import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
 import DebugDialog from './components/debug-dialog/DebugDialog';
-import { PipelineFormEntity } from '@/app/infra/entities/pipeline';
 
 interface PipelineDialogProps {
   open: boolean;
@@ -26,7 +25,6 @@ interface PipelineDialogProps {
   pipelineId?: string;
   isEditMode?: boolean;
   isDefaultPipeline?: boolean;
-  initValues?: PipelineFormEntity;
   onFinish: () => void;
   onNewPipelineCreated?: (pipelineId: string) => void;
   onDeletePipeline: () => void;
@@ -41,7 +39,6 @@ export default function PipelineDialog({
   pipelineId: propPipelineId,
   isEditMode = false,
   isDefaultPipeline = false,
-  initValues,
   onFinish,
   onNewPipelineCreated,
   onDeletePipeline,
@@ -119,7 +116,6 @@ export default function PipelineDialog({
             </DialogHeader>
             <div className="flex-1 overflow-y-auto px-6 pb-6">
               <PipelineFormComponent
-                initValues={initValues}
                 isDefaultPipeline={isDefaultPipeline}
                 onFinish={handleFinish}
                 onNewPipelineCreated={handleNewPipelineCreated}
@@ -146,7 +142,7 @@ export default function PipelineDialog({
         <SidebarProvider className="items-start w-full flex h-full min-h-0">
           <Sidebar
             collapsible="none"
-            className="hidden md:flex h-full min-h-0 w-40 border-r bg-white"
+            className="hidden md:flex h-full min-h-0 w-40 border-r bg-white dark:bg-black"
           >
             <SidebarContent>
               <SidebarGroup>
@@ -184,7 +180,6 @@ export default function PipelineDialog({
             >
               {currentMode === 'config' && (
                 <PipelineFormComponent
-                  initValues={initValues}
                   isDefaultPipeline={isDefaultPipeline}
                   onFinish={handleFinish}
                   onNewPipelineCreated={handleNewPipelineCreated}

web/src/app/home/pipelines/components/debug-dialog/AtBadge.tsx

@@ -15,13 +15,13 @@ export default function AtBadge({
   return (
     <Badge
       variant="secondary"
-      className="flex items-center gap-1 px-2 py-1 text-sm bg-blue-100 text-blue-600 hover:bg-blue-200"
+      className="flex items-center gap-1 px-2 py-1 text-sm bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900/60"
     >
       @{targetName}
       {!readonly && onRemove && (
         <button
           onClick={onRemove}
-          className="ml-1 hover:text-blue-800 focus:outline-none"
+          className="ml-1 hover:text-blue-800 dark:hover:text-blue-200 focus:outline-none"
         >
           <X className="h-3 w-3" />
         </button>

web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { DialogContent } from '@/components/ui/dialog';
@@ -10,6 +10,7 @@ import { cn } from '@/lib/utils';
 import { Message } from '@/app/infra/entities/message';
 import { toast } from 'sonner';
 import AtBadge from './AtBadge';
+import { Switch } from '@/components/ui/switch';
 
 interface MessageComponent {
   type: 'At' | 'Plain';
@@ -36,17 +37,44 @@ export default function DebugDialog({
   const [showAtPopover, setShowAtPopover] = useState(false);
   const [hasAt, setHasAt] = useState(false);
   const [isHovering, setIsHovering] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(true);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
+  const scrollToBottom = useCallback(() => {
+    // 使用setTimeout确保在DOM更新后执行滚动
+    setTimeout(() => {
+      const scrollArea = document.querySelector('.scroll-area') as HTMLElement;
+      if (scrollArea) {
+        scrollArea.scrollTo({
+          top: scrollArea.scrollHeight,
+          behavior: 'smooth',
+        });
+      }
+      // 同时确保messagesEndRef也滚动到视图
+      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 0);
+  }, []);
 
+  const loadMessages = useCallback(
+    async (pipelineId: string) => {
+      try {
+        const response = await httpClient.getWebChatHistoryMessages(
+          pipelineId,
+          sessionType,
+        );
+        setMessages(response.messages);
+      } catch (error) {
+        console.error('Failed to load messages:', error);
+      }
+    },
+    [sessionType],
+  );
+  // 在useEffect中监听messages变化时滚动
   useEffect(() => {
     scrollToBottom();
-  }, [messages]);
+  }, [messages, scrollToBottom]);
 
   useEffect(() => {
     if (open) {
@@ -59,7 +87,7 @@ export default function DebugDialog({
     if (open) {
       loadMessages(selectedPipelineId);
     }
-  }, [sessionType, selectedPipelineId]);
+  }, [sessionType, selectedPipelineId, open, loadMessages]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -84,18 +112,6 @@ export default function DebugDialog({
     }
   }, [showAtPopover]);
 
-  const loadMessages = async (pipelineId: string) => {
-    try {
-      const response = await httpClient.getWebChatHistoryMessages(
-        pipelineId,
-        sessionType,
-      );
-      setMessages(response.messages);
-    } catch (error) {
-      console.error('Failed to load messages:', error);
-    }
-  };
-
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     if (sessionType === 'group') {
@@ -165,19 +181,87 @@ export default function DebugDialog({
         timestamp: new Date().toISOString(),
         message_chain: messageChain,
       };
+      // 根据isStreaming状态决定使用哪种传输方式
+      if (isStreaming) {
+        // streaming
+        // 创建初始bot消息
+        const placeholderRandomId = Math.floor(Math.random() * 1000000);
+        const botMessagePlaceholder: Message = {
+          id: placeholderRandomId,
+          role: 'assistant',
+          content: 'Generating...',
+          timestamp: new Date().toISOString(),
+          message_chain: [{ type: 'Plain', text: 'Generating...' }],
+        };
 
-      setMessages((prevMessages) => [...prevMessages, userMessage]);
-      setInputValue('');
-      setHasAt(false);
+        // 添加用户消息和初始bot消息到状态
 
-      const response = await httpClient.sendWebChatMessage(
-        sessionType,
-        messageChain,
-        selectedPipelineId,
-        120000,
-      );
+        setMessages((prevMessages) => [
+          ...prevMessages,
+          userMessage,
+          botMessagePlaceholder,
+        ]);
+        setInputValue('');
+        setHasAt(false);
+        try {
+          await httpClient.sendStreamingWebChatMessage(
+            sessionType,
+            messageChain,
+            selectedPipelineId,
+            (data) => {
+              // 处理流式响应数据
+              console.log('data', data);
+              if (data.message) {
+                // 更新完整内容
 
-      setMessages((prevMessages) => [...prevMessages, response.message]);
+                setMessages((prevMessages) => {
+                  const updatedMessages = [...prevMessages];
+                  const botMessageIndex = updatedMessages.findIndex(
+                    (message) => message.id === placeholderRandomId,
+                  );
+                  if (botMessageIndex !== -1) {
+                    updatedMessages[botMessageIndex] = {
+                      ...updatedMessages[botMessageIndex],
+                      content: data.message.content,
+                      message_chain: [
+                        { type: 'Plain', text: data.message.content },
+                      ],
+                    };
+                  }
+                  return updatedMessages;
+                });
+              }
+            },
+            () => {},
+            (error) => {
+              // 处理错误
+              console.error('Streaming error:', error);
+              if (sessionType === 'person') {
+                toast.error(t('pipelines.debugDialog.sendFailed'));
+              }
+            },
+          );
+        } catch (error) {
+          console.error('Failed to send streaming message:', error);
+          if (sessionType === 'person') {
+            toast.error(t('pipelines.debugDialog.sendFailed'));
+          }
+        }
+      } else {
+        // non-streaming
+        setMessages((prevMessages) => [...prevMessages, userMessage]);
+        setInputValue('');
+        setHasAt(false);
+
+        const response = await httpClient.sendWebChatMessage(
+          sessionType,
+          messageChain,
+          selectedPipelineId,
+          180000,
+        );
+
+        setMessages((prevMessages) => [...prevMessages, response.message]);
+      }
     } catch (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       error: any
@@ -218,14 +302,14 @@ export default function DebugDialog({
 
   const renderContent = () => (
     <div className="flex flex-1 h-full min-h-0">
-      <div className="w-14 bg-white p-2 pl-0  flex-shrink-0 flex flex-col justify-start gap-2">
+      <div className="w-14 bg-white dark:bg-black p-2 pl-0  flex-shrink-0 flex flex-col justify-start gap-2">
         <Button
           variant="ghost"
           size="icon"
           className={`w-10 h-10 justify-center rounded-md transition-none ${
             sessionType === 'person'
               ? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
-              : 'bg-white text-gray-800 hover:bg-gray-100'
+              : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
           } border-0 shadow-none`}
           onClick={() => setSessionType('person')}
         >
@@ -244,7 +328,7 @@ export default function DebugDialog({
           className={`w-10 h-10 justify-center rounded-md transition-none ${
             sessionType === 'group'
               ? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
-              : 'bg-white text-gray-800 hover:bg-gray-100'
+              : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
           } border-0 shadow-none`}
           onClick={() => setSessionType('group')}
         >
@@ -261,7 +345,7 @@ export default function DebugDialog({
       </div>
 
       <div className="flex-1 flex flex-col w-[10rem] h-full min-h-0">
-        <ScrollArea className="flex-1 p-6 overflow-y-auto min-h-0 bg-white">
+        <ScrollArea className="flex-1 p-6 overflow-y-auto min-h-0 bg-white dark:bg-black">
           <div className="space-y-6">
             {messages.length === 0 ? (
               <div className="text-center text-muted-foreground py-12 text-lg">
@@ -281,7 +365,7 @@ export default function DebugDialog({
                       'max-w-md px-5 py-3 rounded-2xl',
                       message.role === 'user'
                         ? 'bg-[#2288ee] text-white rounded-br-none'
-                        : 'bg-gray-100 text-gray-900 rounded-bl-none',
+                        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-bl-none',
                     )}
                   >
                     {renderMessageContent(message)}
@@ -290,7 +374,7 @@ export default function DebugDialog({
                         'text-xs mt-2',
                         message.role === 'user'
                           ? 'text-white/70'
-                          : 'text-gray-500',
+                          : 'text-gray-500 dark:text-gray-400',
                       )}
                     >
                       {message.role === 'user'
@@ -305,7 +389,13 @@ export default function DebugDialog({
           </div>
         </ScrollArea>
 
-        <div className="p-4 pb-0 bg-white flex gap-2">
+        <div className="p-4 pb-0 bg-white dark:bg-black flex gap-2">
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-600">
+              {t('pipelines.debugDialog.streaming')}
+            </span>
+            <Switch checked={isStreaming} onCheckedChange={setIsStreaming} />
+          </div>
           <div className="flex-1 flex items-center gap-2">
             {hasAt && (
               <AtBadge targetName="webchatbot" onRemove={handleAtRemove} />
@@ -322,23 +412,25 @@ export default function DebugDialog({
                       ? t('pipelines.debugDialog.privateChat')
                       : t('pipelines.debugDialog.groupChat'),
                 })}
-                className="flex-1 rounded-md px-3 py-2 border border-gray-300 focus:border-[#2288ee] transition-none text-base"
+                className="flex-1 rounded-md px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 focus:border-[#2288ee] transition-none text-base"
               />
               {showAtPopover && (
                 <div
                   ref={popoverRef}
-                  className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-white shadow-lg"
+                  className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-white dark:bg-gray-800 dark:border-gray-600 shadow-lg"
                 >
                   <div
                     className={cn(
                       'flex items-center gap-2 px-4 py-1.5 rounded cursor-pointer',
-                      isHovering ? 'bg-gray-100' : 'bg-white',
+                      isHovering
+                        ? 'bg-gray-100 dark:bg-gray-700'
+                        : 'bg-white dark:bg-gray-800',
                     )}
                     onClick={handleAtSelect}
                     onMouseEnter={() => setIsHovering(true)}
                     onMouseLeave={() => setIsHovering(false)}
                   >
-                    <span>
+                    <span className="text-gray-800 dark:text-gray-200">
                       @webchatbot - {t('pipelines.debugDialog.atTips')}
                     </span>
                   </div>
@@ -369,7 +461,7 @@ export default function DebugDialog({
 
   // 原有的Dialog包装
   return (
-    <DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl bg-white">
+    <DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl bg-white dark:bg-black">
       {renderContent()}
     </DialogContent>
   );

web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css

@@ -10,12 +10,22 @@
   flex-direction: row;
   justify-content: space-between;
   gap: 0.5rem;
+  transition: all 0.2s ease;
+}
+
+:global(.dark) .cardContainer {
+  background-color: #1f1f22;
+  box-shadow: 0;
 }
 
 .cardContainer:hover {
   box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
 }
 
+:global(.dark) .cardContainer:hover {
+  box-shadow: 0;
+}
+
 .basicInfoContainer {
   width: 100%;
   height: 100%;
@@ -35,6 +45,11 @@
 .basicInfoNameText {
   font-size: 1.4rem;
   font-weight: 500;
+  color: #1a1a1a;
+}
+
+:global(.dark) .basicInfoNameText {
+  color: #f0f0f0;
 }
 
 .basicInfoDescriptionText {
@@ -48,6 +63,10 @@
   color: #b1b1b1;
 }
 
+:global(.dark) .basicInfoDescriptionText {
+  color: #888888;
+}
+
 .basicInfoLastUpdatedTimeContainer {
   display: flex;
   flex-direction: row;
@@ -58,11 +77,21 @@
 .basicInfoUpdateTimeIcon {
   width: 1.2rem;
   height: 1.2rem;
+  color: #626262;
+}
+
+:global(.dark) .basicInfoUpdateTimeIcon {
+  color: #a0a0a0;
 }
 
 .basicInfoUpdateTimeText {
   font-size: 1rem;
   font-weight: 400;
+  color: #626262;
+}
+
+:global(.dark) .basicInfoUpdateTimeText {
+  color: #a0a0a0;
 }
 
 .operationContainer {
@@ -86,12 +115,20 @@
   color: #ffcd27;
 }
 
+:global(.dark) .operationDefaultBadgeIcon {
+  color: #fbbf24;
+}
+
 .operationDefaultBadgeText {
   font-size: 1rem;
   font-weight: 400;
   color: #ffcd27;
 }
 
+:global(.dark) .operationDefaultBadgeText {
+  color: #fbbf24;
+}
+
 .bigText {
   white-space: nowrap;
   overflow: hidden;

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { Pipeline } from '@/app/infra/entities/api';
+import { GetPipelineResponseData, Pipeline } from '@/app/infra/entities/api';
 import {
-  PipelineFormEntity,
   PipelineConfigTab,
   PipelineConfigStage,
 } from '@/app/infra/entities/pipeline';
@@ -34,7 +33,6 @@ import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 
 export default function PipelineFormComponent({
-  initValues,
   isDefaultPipeline,
   onFinish,
   onNewPipelineCreated,
@@ -49,8 +47,6 @@ export default function PipelineFormComponent({
   isEditMode: boolean;
   disableForm: boolean;
   showButtons?: boolean;
-  // 这里的写法很不安全不规范，未来流水线需要重新整理
-  initValues?: PipelineFormEntity;
   onFinish: () => void;
   onNewPipelineCreated: (pipelineId: string) => void;
   onDeletePipeline: () => void;
@@ -132,13 +128,26 @@ export default function PipelineFormComponent({
         }
       }
     });
+
+    if (isEditMode) {
+      httpClient
+        .getPipeline(pipelineId || '')
+        .then((resp: GetPipelineResponseData) => {
+          form.reset({
+            basic: {
+              name: resp.pipeline.name,
+              description: resp.pipeline.description,
+            },
+            ai: resp.pipeline.config.ai,
+            trigger: resp.pipeline.config.trigger,
+            safety: resp.pipeline.config.safety,
+            output: resp.pipeline.config.output,
+          });
+        });
+    }
   }, []);
 
   useEffect(() => {
-    if (initValues) {
-      form.reset(initValues);
-    }
-
     if (!isEditMode) {
       form.reset({
         basic: {
@@ -147,7 +156,7 @@ export default function PipelineFormComponent({
         },
       });
     }
-  }, [initValues, form, isEditMode]);
+  }, [form, isEditMode]);
 
   function handleFormSubmit(values: FormValues) {
     console.log('handleFormSubmit', values);
@@ -339,7 +348,7 @@ export default function PipelineFormComponent({
 
   return (
     <>
-      <div className="!max-w-[70vw] max-w-6xl h-full p-0 flex flex-col bg-white">
+      <div className="!max-w-[70vw] max-w-6xl h-full p-0 flex flex-col bg-white dark:bg-black">
         <Form {...form}>
           <form
             id="pipeline-form"
@@ -453,7 +462,7 @@ export default function PipelineFormComponent({
           </form>
           {/* 按钮栏移到 Tabs 外部，始终固定底部 */}
           {showButtons && (
-            <div className="flex justify-end gap-2 pt-4 border-t mb-0 bg-white sticky bottom-0 z-10">
+            <div className="flex justify-end gap-2 pt-4 border-t mb-0 bg-white dark:bg-black sticky bottom-0 z-10">
               {isEditMode && !isDefaultPipeline && (
                 <Button
                   type="button"

web/src/app/home/pipelines/page.tsx

@@ -4,11 +4,17 @@ import CreateCardComponent from '@/app/infra/basic-component/create-card-compone
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
 import PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard';
-import { PipelineFormEntity } from '@/app/infra/entities/pipeline';
 import styles from './pipelineConfig.module.css';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import PipelineDialog from './PipelineDetailDialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 export default function PluginConfigPage() {
   const { t } = useTranslation();
@@ -16,24 +22,22 @@ export default function PluginConfigPage() {
   const [isEditForm, setIsEditForm] = useState(false);
   const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([]);
   const [selectedPipelineId, setSelectedPipelineId] = useState('');
-  const [selectedPipelineFormValue, setSelectedPipelineFormValue] =
-    useState<PipelineFormEntity>({
-      basic: {},
-      ai: {},
-      trigger: {},
-      safety: {},
-      output: {},
-    });
+
   const [selectedPipelineIsDefault, setSelectedPipelineIsDefault] =
     useState(false);
+  const [sortByValue, setSortByValue] = useState<string>('created_at');
+  const [sortOrderValue, setSortOrderValue] = useState<string>('DESC');
 
   useEffect(() => {
     getPipelines();
   }, []);
 
-  function getPipelines() {
+  function getPipelines(
+    sortBy: string = sortByValue,
+    sortOrder: string = sortOrderValue,
+  ) {
     httpClient
-      .getPipelines()
+      .getPipelines(sortBy, sortOrder)
       .then((value) => {
         const currentTime = new Date();
         const pipelineList = value.pipelines.map((pipeline) => {
@@ -69,43 +73,27 @@ export default function PluginConfigPage() {
       });
   }
 
-  function getSelectedPipelineForm(id?: string) {
-    httpClient.getPipeline(id ?? selectedPipelineId).then((value) => {
-      setSelectedPipelineFormValue({
-        ai: value.pipeline.config.ai,
-        basic: {
-          description: value.pipeline.description,
-          name: value.pipeline.name,
-        },
-        output: value.pipeline.config.output,
-        safety: value.pipeline.config.safety,
-        trigger: value.pipeline.config.trigger,
-      });
-      setSelectedPipelineIsDefault(value.pipeline.is_default ?? false);
-    });
-  }
-
   const handlePipelineClick = (pipelineId: string) => {
     setSelectedPipelineId(pipelineId);
     setIsEditForm(true);
     setDialogOpen(true);
-    getSelectedPipelineForm(pipelineId);
   };
 
   const handleCreateNew = () => {
     setIsEditForm(false);
     setSelectedPipelineId('');
-    setSelectedPipelineFormValue({
-      basic: {},
-      ai: {},
-      trigger: {},
-      safety: {},
-      output: {},
-    });
+
     setSelectedPipelineIsDefault(false);
     setDialogOpen(true);
   };
 
+  function handleSortChange(value: string) {
+    const [newSortBy, newSortOrder] = value.split(',').map((s) => s.trim());
+    setSortByValue(newSortBy);
+    setSortOrderValue(newSortOrder);
+    getPipelines(newSortBy, newSortOrder);
+  }
+
   return (
     <div className={styles.configPageContainer}>
       <PipelineDialog
@@ -114,7 +102,6 @@ export default function PluginConfigPage() {
         pipelineId={selectedPipelineId || undefined}
         isEditMode={isEditForm}
         isDefaultPipeline={selectedPipelineIsDefault}
-        initValues={selectedPipelineFormValue}
         onFinish={() => {
           getPipelines();
         }}
@@ -123,7 +110,6 @@ export default function PluginConfigPage() {
           setSelectedPipelineId(pipelineId);
           setIsEditForm(true);
           setDialogOpen(true);
-          getSelectedPipelineForm(pipelineId);
         }}
         onDeletePipeline={() => {
           getPipelines();
@@ -134,6 +120,36 @@ export default function PluginConfigPage() {
         }}
       />
 
+      <div className="flex flex-row justify-between items-center mb-4 px-[0.8rem]">
+        <Select
+          value={`${sortByValue},${sortOrderValue}`}
+          onValueChange={handleSortChange}
+        >
+          <SelectTrigger className="w-[180px] cursor-pointer bg-[#ffffff] dark:bg-[#2a2a2e]">
+            <SelectValue placeholder={t('pipelines.sortBy')} />
+          </SelectTrigger>
+          <SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+            <SelectItem
+              value="created_at,DESC"
+              className="text-gray-900 dark:text-gray-100"
+            >
+              {t('pipelines.newestCreated')}
+            </SelectItem>
+            <SelectItem
+              value="updated_at,DESC"
+              className="text-gray-900 dark:text-gray-100"
+            >
+              {t('pipelines.recentlyEdited')}
+            </SelectItem>
+            <SelectItem
+              value="updated_at,ASC"
+              className="text-gray-900 dark:text-gray-100"
+            >
+              {t('pipelines.earliestEdited')}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
       <div className={styles.pipelineListContainer}>
         <CreateCardComponent
           width={'100%'}