From 92f2df1e89f040d374f4fc903a22c1afa2b5f5f0 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 1 Nov 2024 17:55:52 +0700
Subject: [PATCH] feat: show model id on local api serve page (#3926)

---
 .../LocalServerRightPanel/index.tsx           | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/web/screens/LocalServer/LocalServerRightPanel/index.tsx b/web/screens/LocalServer/LocalServerRightPanel/index.tsx
index 13e3cad57..628a61512 100644
--- a/web/screens/LocalServer/LocalServerRightPanel/index.tsx
+++ b/web/screens/LocalServer/LocalServerRightPanel/index.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
-import { Accordion, AccordionItem } from '@janhq/joi'
+import { Accordion, AccordionItem, Input, Tooltip } from '@janhq/joi'
 import { useAtomValue, useSetAtom } from 'jotai'
-import { AlertTriangleIcon, InfoIcon } from 'lucide-react'
+import { AlertTriangleIcon, CheckIcon, CopyIcon, InfoIcon } from 'lucide-react'
 
 import EngineSetting from '@/containers/EngineSetting'
 import { modalTroubleShootingAtom } from '@/containers/ModalTroubleShoot'
@@ -12,6 +12,8 @@ import RightPanelContainer from '@/containers/RightPanelContainer'
 
 import { loadModelErrorAtom } from '@/hooks/useActiveModel'
 
+import { useClipboard } from '@/hooks/useClipboard'
+
 import { getConfigurationsData } from '@/utils/componentSettings'
 
 import {
@@ -29,6 +31,8 @@ const LocalServerRightPanel = () => {
 
   const selectedModel = useAtomValue(selectedModelAtom)
 
+  const clipboard = useClipboard({ timeout: 1000 })
+
   const [currentModelSettingParams, setCurrentModelSettingParams] = useState(
     extractModelLoadParams(selectedModel?.settings)
   )
@@ -92,6 +96,35 @@ const LocalServerRightPanel = () => {
 
         <ModelDropdown strictedThread={false} disabled={serverEnabled} />
 
+        <div className="mt-2">
+          <Input
+            value={selectedModel?.id || ''}
+            className="cursor-pointer"
+            readOnly
+            suffixIcon={
+              clipboard.copied ? (
+                <CheckIcon
+                  size={14}
+                  className="text-[hsla(var(--success-bg))]"
+                />
+              ) : (
+                <Tooltip
+                  trigger={
+                    <CopyIcon
+                      size={14}
+                      className="text-[hsla(var(--text-secondary))]"
+                      onClick={() => {
+                        clipboard.copy(selectedModel?.id)
+                      }}
+                    />
+                  }
+                  content="Copy Model ID"
+                />
+              )
+            }
+          />
+        </div>
+
         {loadModelError && serverEnabled && (
           <div className="mt-3 flex space-x-2">
             <AlertTriangleIcon