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

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

@@ -8,6 +8,7 @@ import LLMForm from '@/app/home/models/component/llm-form/LLMForm';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { LLMModel } from '@/app/infra/entities/api';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   Dialog,
   DialogContent,
@@ -17,6 +18,9 @@ import {
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
+import { EmbeddingCardVO } from '@/app/home/models/component/embedding-card/EmbeddingCardVO';
+import EmbeddingCard from '@/app/home/models/component/embedding-card/EmbeddingCard';
+import EmbeddingForm from '@/app/home/models/component/embedding-form/EmbeddingForm';
 
 export default function LLMConfigPage() {
   const { t } = useTranslation();
@@ -24,13 +28,21 @@ export default function LLMConfigPage() {
   const [modalOpen, setModalOpen] = useState<boolean>(false);
   const [isEditForm, setIsEditForm] = useState(false);
   const [nowSelectedLLM, setNowSelectedLLM] = useState<LLMCardVO | null>(null);
+  const [embeddingCardList, setEmbeddingCardList] = useState<EmbeddingCardVO[]>(
+    [],
+  );
+  const [embeddingModalOpen, setEmbeddingModalOpen] = useState<boolean>(false);
+  const [isEditEmbeddingForm, setIsEditEmbeddingForm] = useState(false);
+  const [nowSelectedEmbedding, setNowSelectedEmbedding] =
+    useState<EmbeddingCardVO | null>(null);
 
   useEffect(() => {
     getLLMModelList();
+    getEmbeddingModelList();
   }, []);
 
   async function getLLMModelList() {
-    const requesterNameListResp = await httpClient.getProviderRequesters();
+    const requesterNameListResp = await httpClient.getProviderRequesters('llm');
     const requesterNameList = requesterNameListResp.requesters.map((item) => {
       return {
         label: extractI18nObject(item.label),
@@ -74,6 +86,55 @@ export default function LLMConfigPage() {
     setNowSelectedLLM(null);
     setModalOpen(true);
   }
+  function selectEmbedding(cardVO: EmbeddingCardVO) {
+    setIsEditEmbeddingForm(true);
+    setNowSelectedEmbedding(cardVO);
+    setEmbeddingModalOpen(true);
+  }
+
+  function handleCreateEmbeddingModelClick() {
+    setIsEditEmbeddingForm(false);
+    setNowSelectedEmbedding(null);
+    setEmbeddingModalOpen(true);
+  }
+  async function getEmbeddingModelList() {
+    const requesterNameListResp =
+      await httpClient.getProviderRequesters('text-embedding');
+    const requesterNameList = requesterNameListResp.requesters.map((item) => {
+      return {
+        label: extractI18nObject(item.label),
+        value: item.name,
+      };
+    });
+
+    httpClient
+      .getProviderEmbeddingModels()
+      .then((resp) => {
+        const embeddingModelList: EmbeddingCardVO[] = resp.models.map(
+          (model: {
+            uuid: string;
+            requester: string;
+            name: string;
+            requester_config?: { base_url?: string };
+          }) => {
+            return new EmbeddingCardVO({
+              id: model.uuid,
+              iconURL: httpClient.getProviderRequesterIconURL(model.requester),
+              name: model.name,
+              providerLabel:
+                requesterNameList.find((item) => item.value === model.requester)
+                  ?.label || model.requester.substring(0, 10),
+              baseURL: model.requester_config?.base_url || '',
+            });
+          },
+        );
+        setEmbeddingCardList(embeddingModelList);
+      })
+      .catch((err) => {
+        console.error('get Embedding model list error', err);
+        toast.error(t('embedding.getModelListError') + err.message);
+      });
+  }
 
   return (
     <div>
@@ -101,26 +162,110 @@ export default function LLMConfigPage() {
           />
         </DialogContent>
       </Dialog>
-      <div className={`${styles.modelListContainer}`}>
-        <CreateCardComponent
-          width={'100%'}
-          height={'10rem'}
-          plusSize={'90px'}
-          onClick={handleCreateModelClick}
-        />
-        {cardList.map((cardVO) => {
-          return (
-            <div
-              key={cardVO.id}
-              onClick={() => {
-                selectLLM(cardVO);
-              }}
-            >
-              <LLMCard cardVO={cardVO}></LLMCard>
+      <Dialog open={embeddingModalOpen} onOpenChange={setEmbeddingModalOpen}>
+        <DialogContent className="w-[700px] p-6">
+          <DialogHeader>
+            <DialogTitle>
+              {isEditEmbeddingForm
+                ? t('embedding.editModel')
+                : t('embedding.createModel')}
+            </DialogTitle>
+          </DialogHeader>
+          <EmbeddingForm
+            editMode={isEditEmbeddingForm}
+            initEmbeddingId={nowSelectedEmbedding?.id}
+            onFormSubmit={() => {
+              setEmbeddingModalOpen(false);
+              getEmbeddingModelList();
+            }}
+            onFormCancel={() => {
+              setEmbeddingModalOpen(false);
+            }}
+            onEmbeddingDeleted={() => {
+              setEmbeddingModalOpen(false);
+              getEmbeddingModelList();
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+
+      <Tabs defaultValue="llm" className="w-full">
+        <div className="flex flex-row gap-0 mb-4">
+          <div className="flex flex-row justify-between items-center px-[0.8rem]">
+            <TabsList className="shadow-md py-5 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
+              <TabsTrigger value="llm" className="px-6 py-4 cursor-pointer">
+                {t('llm.llmModels')}
+              </TabsTrigger>
+              <TabsTrigger
+                value="embedding"
+                className="px-6 py-4 cursor-pointer"
+              >
+                {t('embedding.embeddingModels')}
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="llm">
+            <div className="flex flex-row justify-between items-center px-[0.4rem] h-full">
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {t('llm.description')}
+              </p>
             </div>
-          );
-        })}
-      </div>
+          </TabsContent>
+          <TabsContent value="embedding">
+            <div className="flex flex-row justify-between items-center px-[0.4rem] h-full">
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {t('embedding.description')}
+              </p>
+            </div>
+          </TabsContent>
+        </div>
+
+        <TabsContent value="llm">
+          <div className={`${styles.modelListContainer}`}>
+            <CreateCardComponent
+              width={'100%'}
+              height={'10rem'}
+              plusSize={'90px'}
+              onClick={handleCreateModelClick}
+            />
+            {cardList.map((cardVO) => {
+              return (
+                <div
+                  key={cardVO.id}
+                  onClick={() => {
+                    selectLLM(cardVO);
+                  }}
+                >
+                  <LLMCard cardVO={cardVO}></LLMCard>
+                </div>
+              );
+            })}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="embedding">
+          <div className={`${styles.modelListContainer}`}>
+            <CreateCardComponent
+              width={'100%'}
+              height={'10rem'}
+              plusSize={'90px'}
+              onClick={handleCreateEmbeddingModelClick}
+            />
+            {embeddingCardList.map((cardVO) => {
+              return (
+                <div
+                  key={cardVO.id}
+                  onClick={() => {
+                    selectEmbedding(cardVO);
+                  }}
+                >
+                  <EmbeddingCard cardVO={cardVO}></EmbeddingCard>
+                </div>
+              );
+            })}
+          </div>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }