feat: adjust frontend to accept new tab from UI extension framework

Author: urmauur

web/screens/Thread/ThreadRightPanel/index.tsx

@@ -1,5 +1,7 @@
 import { memo, useCallback, useMemo } from 'react'
 
+import { UIComponent, UIManager } from '@janhq/core'
+
 import {
   InferenceEngine,
   SettingComponentProps,
@@ -210,6 +212,8 @@ const ThreadRightPanel = () => {
     [activeThread, setEngineParamsUpdate, stopModel, updateModelParameter]
   )
 
+  const tabsFromExtension = UIManager.instance().get(UIComponent.Tab)
+
   if (!activeThread) {
     return null
   }
@@ -230,6 +234,7 @@ const ThreadRightPanel = () => {
                 },
               ]
             : []),
+          ...(tabsFromExtension.length ? tabsFromExtension : []),
         ]}
         value={activeTabThreadRightPanel as string}
         onValueChange={(value) => setActiveTabThreadRightPanel(value)}
@@ -290,6 +295,13 @@ const ThreadRightPanel = () => {
         <TabsContent value="tools">
           <Tools />
         </TabsContent>
+
+        {tabsFromExtension.length > 0 &&
+          tabsFromExtension.map((tab) => (
+            <TabsContent key={tab.value} value={tab.value}>
+              <div className="px-2 py-4" ref={(el) => el && tab.render(el)} />
+            </TabsContent>
+          ))}
       </Tabs>
     </RightPanelContainer>
   )