(WIP) feat: initial ui extension framework

core/src/browser/index.ts

@@ -39,3 +39,9 @@ export * from './tools'
  * @module
  */
 export * from './models'
+
+/**
+ * Export all base views.
+ * @module
+ */
+export * from './views'

core/src/browser/views/UIManager.ts

@@ -0,0 +1,78 @@
+// Define an enum for the component types
+export enum UIComponent {
+  RightPanelTabItem = 'right-panel-tab-item-component',
+  InputChatBox = 'input-chat-box-component',
+}
+
+// Define object structures for each component type
+interface TabItem {
+  name: string
+  value: string
+  render?: any
+}
+
+interface InputChatBox {
+  name: string
+  icon: any
+  render: any
+  onClick: any
+}
+
+// Map each `UIComponent` to a corresponding object type
+type TypeObjectMap = {
+  [UIComponent.RightPanelTabItem]: TabItem
+  [UIComponent.InputChatBox]: InputChatBox
+}
+
+// Utility type to extract the correct object type based on the `UIComponent`
+type TypeObject<T extends UIComponent> = TypeObjectMap[T]
+
+export class UIManager {
+  // Change to store an array of objects for each component type
+  public view = new Map<UIComponent, TypeObject<UIComponent>[]>()
+
+  /**
+   * Registers a UI by its type (defined in `UIComponent` enum).
+   * @param type - The predefined type for the UI from the `UIComponent` enum.
+   * @param view - The object to register, which depends on the type.
+   */
+  register<T extends UIComponent>(type: T, view: TypeObject<T>) {
+    // Check if the type already has registered objects
+    if (!this.view.has(type)) {
+      this.view.set(type, []) // Initialize with an empty array if not present
+    }
+    // Push the new view object into the array for the given type
+    this.view.get(type)?.push(view)
+  }
+
+  /**
+   * Retrieves all registered UIs by type.
+   * @param type - The type of the UI to retrieve.
+   * @returns An array of UIs associated with the specified type, or an empty array if not found.
+   */
+  get<T extends UIComponent>(type: T): TypeObject<T>[] {
+    return (this.view.get(type) as TypeObject<T>[]) || [] // Return an empty array if no entries are found
+  }
+
+  /**
+   * Retrieves all registered UIs.
+   * @returns An object containing all UIs with their registered component types as keys.
+   */
+  getAll(): Record<UIComponent, TypeObject<UIComponent>[]> {
+    const ui: Record<UIComponent, TypeObject<UIComponent>[]> = {} as Record<
+      UIComponent,
+      TypeObject<UIComponent>[]
+    >
+    this.view.forEach((value, key) => {
+      ui[key] = value // Map directly to the UI components array
+    })
+    return ui
+  }
+
+  /**
+   * The instance of the UI manager.
+   */
+  static instance(): UIManager {
+    return (window.core?.UIManager as UIManager) ?? new UIManager()
+  }
+}

core/src/browser/views/index.ts

@@ -0,0 +1 @@
+export * from './UIManager'

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,
@@ -81,7 +83,7 @@
     const componentDataRuntimeSetting = getConfigurationsData(
       modelRuntimeParams,
       selectedModel
     ).filter((x) => x.key !== 'prompt_template')
 
     // engine setting
     const modelEngineParams = extractModelLoadParams(
@@ -94,7 +96,7 @@
     const componentDataEngineSetting = getConfigurationsData(
       modelEngineParams,
       selectedModel
     ).filter((x) => x.key !== 'prompt_template' && x.key !== 'embedding')
 
     // the max value of max token has to follow context length
     const maxTokens = componentDataRuntimeSetting.find(
@@ -214,6 +216,10 @@
     [activeThread, resetModel, setEngineParamsUpdate, updateModelParameter]
   )
 
+  const tabsFromExtension = UIManager.instance().get(
+    UIComponent.RightPanelTabItem
+  )
+
   if (!activeThread) {
     return null
   }
@@ -234,6 +240,7 @@
                 },
               ]
             : []),
+          ...(tabsFromExtension.length ? tabsFromExtension : []),
         ]}
         value={activeTabThreadRightPanel as string}
         onValueChange={(value) => setActiveTabThreadRightPanel(value)}
@@ -294,6 +301,13 @@
         <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>
   )