@theia/ai-ide 1.64.0-next.28 → 1.64.0

package/lib/common/workspace-functions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RUN_TASK_FUNCTION_ID = exports.LIST_TASKS_FUNCTION_ID = exports.SEARCH_IN_WORKSPACE_FUNCTION_ID = exports.GET_FILE_DIAGNOSTICS_ID = exports.GET_WORKSPACE_DIRECTORY_STRUCTURE_FUNCTION_ID = exports.GET_WORKSPACE_FILE_LIST_FUNCTION_ID = exports.FILE_CONTENT_FUNCTION_ID = void 0;
+exports.STOP_LAUNCH_CONFIGURATION_FUNCTION_ID = exports.RUN_LAUNCH_CONFIGURATION_FUNCTION_ID = exports.LIST_LAUNCH_CONFIGURATIONS_FUNCTION_ID = exports.RUN_TASK_FUNCTION_ID = exports.LIST_TASKS_FUNCTION_ID = exports.SEARCH_IN_WORKSPACE_FUNCTION_ID = exports.GET_FILE_DIAGNOSTICS_ID = exports.GET_WORKSPACE_DIRECTORY_STRUCTURE_FUNCTION_ID = exports.GET_WORKSPACE_FILE_LIST_FUNCTION_ID = exports.FILE_CONTENT_FUNCTION_ID = void 0;
 // *****************************************************************************
 // Copyright (C) 2024 EclipseSource GmbH.
 //
@@ -23,4 +23,7 @@ exports.GET_FILE_DIAGNOSTICS_ID = 'getFileDiagnostics';
 exports.SEARCH_IN_WORKSPACE_FUNCTION_ID = 'searchInWorkspace';
 exports.LIST_TASKS_FUNCTION_ID = 'listTasks';
 exports.RUN_TASK_FUNCTION_ID = 'runTask';
+exports.LIST_LAUNCH_CONFIGURATIONS_FUNCTION_ID = 'listLaunchConfigurations';
+exports.RUN_LAUNCH_CONFIGURATION_FUNCTION_ID = 'runLaunchConfiguration';
+exports.STOP_LAUNCH_CONFIGURATION_FUNCTION_ID = 'stopLaunchConfiguration';
 //# sourceMappingURL=workspace-functions.js.map

package/lib/common/workspace-functions.js.map

@@ -1 +1 @@
-{"version":3,"file":"workspace-functions.js","sourceRoot":"","sources":["../../src/common/workspace-functions.ts"],"names":[],"mappings":";;;AAAA,gFAAgF;AAChF,yCAAyC;AACzC,EAAE;AACF,2EAA2E;AAC3E,mEAAmE;AACnE,wCAAwC;AACxC,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,6EAA6E;AAC7E,yDAAyD;AACzD,uDAAuD;AACvD,EAAE;AACF,gFAAgF;AAChF,gFAAgF;AACnE,QAAA,wBAAwB,GAAG,gBAAgB,CAAC;AAC5C,QAAA,mCAAmC,GAAG,sBAAsB,CAAC;AAC7D,QAAA,6CAA6C,GAAG,gCAAgC,CAAC;AACjF,QAAA,uBAAuB,GAAG,oBAAoB,CAAC;AAC/C,QAAA,+BAA+B,GAAG,mBAAmB,CAAC;AACtD,QAAA,sBAAsB,GAAG,WAAW,CAAC;AACrC,QAAA,oBAAoB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"workspace-functions.js","sourceRoot":"","sources":["../../src/common/workspace-functions.ts"],"names":[],"mappings":";;;AAAA,gFAAgF;AAChF,yCAAyC;AACzC,EAAE;AACF,2EAA2E;AAC3E,mEAAmE;AACnE,wCAAwC;AACxC,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,6EAA6E;AAC7E,yDAAyD;AACzD,uDAAuD;AACvD,EAAE;AACF,gFAAgF;AAChF,gFAAgF;AACnE,QAAA,wBAAwB,GAAG,gBAAgB,CAAC;AAC5C,QAAA,mCAAmC,GAAG,sBAAsB,CAAC;AAC7D,QAAA,6CAA6C,GAAG,gCAAgC,CAAC;AACjF,QAAA,uBAAuB,GAAG,oBAAoB,CAAC;AAC/C,QAAA,+BAA+B,GAAG,mBAAmB,CAAC;AACtD,QAAA,sBAAsB,GAAG,WAAW,CAAC;AACrC,QAAA,oBAAoB,GAAG,SAAS,CAAC;AACjC,QAAA,sCAAsC,GAAG,0BAA0B,CAAC;AACpE,QAAA,oCAAoC,GAAG,wBAAwB,CAAC;AAChE,QAAA,qCAAqC,GAAG,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theia/ai-ide",
-  "version": "1.64.0-next.28+c0fda4c47",
+  "version": "1.64.0",
   "description": "AI IDE Agents Extension",
   "license": "EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0",
   "repository": {
@@ -15,19 +15,20 @@
     "theia-extension"
   ],
   "dependencies": {
-    "@theia/ai-chat": "1.64.0-next.28+c0fda4c47",
-    "@theia/ai-chat-ui": "1.64.0-next.28+c0fda4c47",
-    "@theia/ai-core": "1.64.0-next.28+c0fda4c47",
-    "@theia/ai-mcp": "1.64.0-next.28+c0fda4c47",
-    "@theia/core": "1.64.0-next.28+c0fda4c47",
-    "@theia/filesystem": "1.64.0-next.28+c0fda4c47",
-    "@theia/markers": "1.64.0-next.28+c0fda4c47",
-    "@theia/monaco": "1.64.0-next.28+c0fda4c47",
-    "@theia/navigator": "1.64.0-next.28+c0fda4c47",
-    "@theia/search-in-workspace": "1.64.0-next.28+c0fda4c47",
-    "@theia/task": "1.64.0-next.28+c0fda4c47",
-    "@theia/terminal": "1.64.0-next.28+c0fda4c47",
-    "@theia/workspace": "1.64.0-next.28+c0fda4c47",
+    "@theia/ai-chat": "1.64.0",
+    "@theia/ai-chat-ui": "1.64.0",
+    "@theia/ai-core": "1.64.0",
+    "@theia/ai-mcp": "1.64.0",
+    "@theia/core": "1.64.0",
+    "@theia/debug": "1.64.0",
+    "@theia/filesystem": "1.64.0",
+    "@theia/markers": "1.64.0",
+    "@theia/monaco": "1.64.0",
+    "@theia/navigator": "1.64.0",
+    "@theia/search-in-workspace": "1.64.0",
+    "@theia/task": "1.64.0",
+    "@theia/terminal": "1.64.0",
+    "@theia/workspace": "1.64.0",
     "date-fns": "^4.1.0",
     "ignore": "^6.0.0",
     "js-yaml": "^4.1.0",
@@ -38,8 +39,8 @@
     "access": "public"
   },
   "devDependencies": {
-    "@theia/cli": "1.64.0-next.28+c0fda4c47",
-    "@theia/test": "1.64.0-next.28+c0fda4c47"
+    "@theia/cli": "1.64.0",
+    "@theia/test": "1.64.0"
   },
   "theiaExtensions": [
     {
@@ -63,5 +64,5 @@
   "nyc": {
     "extends": "../../configs/nyc.json"
   },
-  "gitHead": "c0fda4c4706fcd4ec1616c8e2f24673352a707d1"
+  "gitHead": "4c074e0d16c48e96a044b2f8bc4717de2e031c4b"
 }

package/src/browser/ai-configuration/agent-configuration-widget.tsx

@@ -20,6 +20,7 @@ import {
     AISettingsService,
     AIVariableService,
     BasePromptFragment,
+    FrontendLanguageModelRegistry,
     LanguageModel,
     LanguageModelRegistry,
     matchVariablesRegEx,
@@ -33,6 +34,7 @@ import { inject, injectable, postConstruct } from '@theia/core/shared/inversify'
 import * as React from '@theia/core/shared/react';
 import { AIConfigurationSelectionService } from './ai-configuration-service';
 import { LanguageModelRenderer } from './language-model-renderer';
+import { LanguageModelAliasRegistry, LanguageModelAlias } from '@theia/ai-core/lib/common/language-model-alias';
 import { AIVariableConfigurationWidget } from './variable-configuration-widget';
 import { nls } from '@theia/core';
 import { PromptVariantRenderer } from './template-settings-renderer';
@@ -53,11 +55,14 @@ export class AIAgentConfigurationWidget extends ReactWidget {
     protected readonly agentService: AgentService;
 
     @inject(LanguageModelRegistry)
-    protected readonly languageModelRegistry: LanguageModelRegistry;
+    protected readonly languageModelRegistry: FrontendLanguageModelRegistry;
 
     @inject(PromptFragmentCustomizationService)
     protected readonly promptFragmentCustomizationService: PromptFragmentCustomizationService;
 
+    @inject(LanguageModelAliasRegistry)
+    protected readonly languageModelAliasRegistry: LanguageModelAliasRegistry;
+
     @inject(AISettingsService)
     protected readonly aiSettingsService: AISettingsService;
 
@@ -74,6 +79,7 @@ export class AIAgentConfigurationWidget extends ReactWidget {
     protected readonly quickInputService: QuickInputService;
 
     protected languageModels: LanguageModel[] | undefined;
+    protected languageModelAliases: LanguageModelAlias[] = [];
 
     @postConstruct()
     protected init(): void {
@@ -85,7 +91,15 @@ export class AIAgentConfigurationWidget extends ReactWidget {
             this.languageModels = models ?? [];
             this.update();
         });
+        this.languageModelAliasRegistry.ready.then(() => {
+            this.languageModelAliases = this.languageModelAliasRegistry.getAliases();
+            this.toDispose.push(this.languageModelAliasRegistry.onDidChange(() => {
+                this.languageModelAliases = this.languageModelAliasRegistry.getAliases();
+                this.update();
+            }));
+        });
         this.toDispose.push(this.languageModelRegistry.onChange(({ models }) => {
+            this.languageModelAliases = this.languageModelAliasRegistry.getAliases();
             this.languageModels = models;
             this.update();
         }));
@@ -183,7 +197,9 @@ export class AIAgentConfigurationWidget extends ReactWidget {
                     agent={agent}
                     languageModels={this.languageModels}
                     aiSettingsService={this.aiSettingsService}
-                    languageModelRegistry={this.languageModelRegistry} />
+                    languageModelRegistry={this.languageModelRegistry}
+                    languageModelAliases={this.languageModelAliases}
+                />
             </div>
             <div>
                 <span>Used Global Variables:</span>

package/src/browser/ai-configuration/ai-configuration-service.ts

@@ -21,12 +21,16 @@ import { injectable } from '@theia/core/shared/inversify';
 @injectable()
 export class AIConfigurationSelectionService {
     protected activeAgent?: Agent;
+    protected selectedAliasId?: string;
 
     protected readonly onDidSelectConfigurationEmitter = new Emitter<string>();
     onDidSelectConfiguration = this.onDidSelectConfigurationEmitter.event;
 
     protected readonly onDidAgentChangeEmitter = new Emitter<Agent | undefined>();
-    onDidAgentChange = this.onDidSelectConfigurationEmitter.event;
+    onDidAgentChange = this.onDidAgentChangeEmitter.event;
+
+    protected readonly onDidAliasChangeEmitter = new Emitter<string | undefined>();
+    onDidAliasChange = this.onDidAliasChangeEmitter.event;
 
     public getActiveAgent(): Agent | undefined {
         return this.activeAgent;
@@ -37,6 +41,15 @@ export class AIConfigurationSelectionService {
         this.onDidAgentChangeEmitter.fire(agent);
     }
 
+    public getSelectedAliasId(): string | undefined {
+        return this.selectedAliasId;
+    }
+
+    public setSelectedAliasId(aliasId?: string): void {
+        this.selectedAliasId = aliasId;
+        this.onDidAliasChangeEmitter.fire(aliasId);
+    }
+
     public selectConfigurationTab(widgetId: string): void {
         this.onDidSelectConfigurationEmitter.fire(widgetId);
     }

package/src/browser/ai-configuration/ai-configuration-widget.tsx

@@ -25,12 +25,13 @@ import { nls } from '@theia/core';
 import { AIMCPConfigurationWidget } from './mcp-configuration-widget';
 import { AITokenUsageConfigurationWidget } from './token-usage-configuration-widget';
 import { AIPromptFragmentsConfigurationWidget } from './prompt-fragments-configuration-widget';
+import { ModelAliasesConfigurationWidget } from './model-aliases-configuration-widget';
 
 @injectable()
 export class AIConfigurationContainerWidget extends BaseWidget {
 
     static readonly ID = 'ai-configuration';
-    static readonly LABEL = nls.localize('theia/ai/core/aiConfiguration/label', 'AI Configuration [Alpha]');
+    static readonly LABEL = nls.localize('theia/ai/core/aiConfiguration/label', 'AI Configuration [Beta]');
     protected dockpanel: DockPanel;
 
     @inject(TheiaDockPanel.Factory)
@@ -46,6 +47,7 @@ export class AIConfigurationContainerWidget extends BaseWidget {
     protected tokenUsageWidget: AITokenUsageConfigurationWidget;
     protected promptFragmentsWidget: AIPromptFragmentsConfigurationWidget;
     protected toolsWidget: AIToolsConfigurationWidget;
+    protected modelAliasesWidget: ModelAliasesConfigurationWidget;
 
     @postConstruct()
     protected init(): void {
@@ -74,6 +76,7 @@ export class AIConfigurationContainerWidget extends BaseWidget {
         this.tokenUsageWidget = await this.widgetManager.getOrCreateWidget(AITokenUsageConfigurationWidget.ID);
         this.promptFragmentsWidget = await this.widgetManager.getOrCreateWidget(AIPromptFragmentsConfigurationWidget.ID);
         this.toolsWidget = await this.widgetManager.getOrCreateWidget(AIToolsConfigurationWidget.ID);
+        this.modelAliasesWidget = await this.widgetManager.getOrCreateWidget(ModelAliasesConfigurationWidget.ID);
 
         this.dockpanel.addWidget(this.agentsWidget);
         this.dockpanel.addWidget(this.variablesWidget, { mode: 'tab-after', ref: this.agentsWidget });
@@ -81,6 +84,7 @@ export class AIConfigurationContainerWidget extends BaseWidget {
         this.dockpanel.addWidget(this.tokenUsageWidget, { mode: 'tab-after', ref: this.mcpWidget });
         this.dockpanel.addWidget(this.promptFragmentsWidget, { mode: 'tab-after', ref: this.tokenUsageWidget });
         this.dockpanel.addWidget(this.toolsWidget, { mode: 'tab-after', ref: this.promptFragmentsWidget });
+        this.dockpanel.addWidget(this.modelAliasesWidget, { mode: 'tab-after', ref: this.toolsWidget });
 
         this.update();
     }
@@ -99,6 +103,8 @@ export class AIConfigurationContainerWidget extends BaseWidget {
                 this.dockpanel.activateWidget(this.promptFragmentsWidget);
             } else if (widgetId === AIToolsConfigurationWidget.ID) {
                 this.dockpanel.activateWidget(this.toolsWidget);
+            } else if (widgetId === ModelAliasesConfigurationWidget.ID) {
+                this.dockpanel.activateWidget(this.modelAliasesWidget);
             }
         });
     }

package/src/browser/ai-configuration/language-model-renderer.tsx

@@ -14,7 +14,8 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 import * as React from '@theia/core/shared/react';
-import { Agent, AISettingsService, LanguageModel, LanguageModelRegistry, LanguageModelRequirement } from '@theia/ai-core/lib/common';
+import { Agent, AISettingsService, FrontendLanguageModelRegistry, LanguageModel, LanguageModelRequirement } from '@theia/ai-core/lib/common';
+import { LanguageModelAlias } from '@theia/ai-core/lib/common/language-model-alias';
 import { Mutable } from '@theia/core';
 import { nls } from '@theia/core/lib/common/nls';
 
@@ -22,11 +23,12 @@ export interface LanguageModelSettingsProps {
     agent: Agent;
     languageModels?: LanguageModel[];
     aiSettingsService: AISettingsService;
-    languageModelRegistry: LanguageModelRegistry;
+    languageModelRegistry: FrontendLanguageModelRegistry;
+    languageModelAliases: LanguageModelAlias[];
 }
 
 export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
-    { agent, languageModels, aiSettingsService, languageModelRegistry }) => {
+    { agent, languageModels, aiSettingsService, languageModelRegistry, languageModelAliases: aliases }) => {
 
     const findLanguageModelRequirement = async (purpose: string): Promise<LanguageModelRequirement | undefined> => {
         const requirementSetting = await aiSettingsService.getAgentSettings(agent.id);
@@ -34,6 +36,7 @@ export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
     };
 
     const [lmRequirementMap, setLmRequirementMap] = React.useState<Record<string, LanguageModelRequirement>>({});
+    const [resolvedAliasModels, setResolvedAliasModels] = React.useState<Record<string, LanguageModel | undefined>>({});
 
     React.useEffect(() => {
         const computeLmRequirementMap = async () => {
@@ -54,32 +57,20 @@ export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
         computeLmRequirementMap();
     }, []);
 
-    const renderLanguageModelMetadata = (requirement: LanguageModelRequirement, index: number) => {
-        const languageModel = languageModels?.find(model => model.id === requirement.identifier);
-        if (!languageModel) {
-            return <div></div>;
-        }
-
-        return <>
-            <div>{requirement.purpose}</div>
-            <div key={index}>
-                {languageModel.id && <p><strong>{nls.localizeByDefault('Identifier')}: </strong> {languageModel.id}</p>}
-                {languageModel.name && <p><strong>{nls.localizeByDefault('Name')}: </strong> {languageModel.name}</p>}
-                {languageModel.vendor && <p><strong>{nls.localize('theia/ai/core/languageModelRenderer/vendor', 'Vendor')}: </strong> {languageModel.vendor}</p>}
-                {languageModel.version && <p><strong>{nls.localizeByDefault('Version')}: </strong> {languageModel.version}</p>}
-                {languageModel.family && <p><strong>{nls.localize('theia/ai/core/languageModelRenderer/family', 'Family')}: </strong> {languageModel.family}</p>}
-                {languageModel.maxInputTokens &&
-                    <p><strong>
-                        {nls.localize('theia/ai/core/languageModelRenderer/minInputTokens', 'Min Input Tokens')}:
-                    </strong> {languageModel.maxInputTokens}</p>}
-                {languageModel.maxOutputTokens &&
-                    <p><strong>
-                        {nls.localize('theia/ai/core/languageModelRenderer/maxOutputTokens', 'Max Output Tokens')}:
-                    </strong> {languageModel.maxOutputTokens}</p>}
-            </div>
-        </>;
-
-    };
+    // Effect to resolve alias to model whenever requirements.identifier or aliases change
+    React.useEffect(() => {
+        const resolveAliases = async () => {
+            const newResolved: Record<string, LanguageModel | undefined> = {};
+            await Promise.all(Object.values(lmRequirementMap).map(async requirements => {
+                const id = requirements.identifier;
+                if (id && aliases.some(a => a.id === id)) {
+                    newResolved[id] = await languageModelRegistry.getReadyLanguageModel(id);
+                }
+            }));
+            setResolvedAliasModels(newResolved);
+        };
+        resolveAliases();
+    }, [lmRequirementMap, aliases]);
 
     const onSelectedModelChange = (purpose: string, event: React.ChangeEvent<HTMLSelectElement>): void => {
         const newLmRequirementMap = { ...lmRequirementMap, [purpose]: { purpose, identifier: event.target.value } };
@@ -88,35 +79,72 @@ export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
     };
 
     return <div className='language-model-container'>
-        {Object.values(lmRequirementMap).map((requirements, index) => (
-            <React.Fragment key={index}>
-                <div><strong>{nls.localize('theia/ai/core/languageModelRenderer/purpose', 'Purpose')}:</strong></div>
-                <div>
-                    {/* language model metadata */}
-                    {renderLanguageModelMetadata(requirements, index)}
-                    {/* language model selector */}
-                    <>
-                        <label
-                            className="theia-header no-select"
-                            htmlFor={`model-select-${agent.id}`}>
-                            {nls.localize('theia/ai/core/languageModelRenderer/languageModel', 'Language Model')}:
-                        </label>
-                        <select
-                            className="theia-select"
-                            id={`model-select-${agent.id}`}
-                            value={requirements.identifier}
-                            onChange={event => onSelectedModelChange(requirements.purpose, event)}
-                        >
-                            <option value=""></option>
-                            {languageModels?.sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id)).map(model => (
-                                <option key={model.id} value={model.id}>{model.name ?? model.id}</option>
-                            ))}
-                        </select>
-                    </>
-                    <hr />
-                </div>
-            </React.Fragment>
-        ))}
-
+        {Object.values(lmRequirementMap).map((requirement, index) => {
+            const isAlias = requirement.identifier && aliases.some(a => a.id === requirement.identifier);
+            const resolvedModel = isAlias ? resolvedAliasModels[requirement.identifier] : undefined;
+            return (
+                <React.Fragment key={index}>
+                    <div className="ai-alias-evaluates-to-container">
+                        <strong>{nls.localize('theia/ai/core/languageModelRenderer/purpose', 'Purpose')}:</strong> {requirement.purpose}
+                    </div>
+                    <div>
+                        <div className="ai-alias-evaluates-to-container">
+                            <label
+                                className="theia-header no-select"
+                                htmlFor={`model-select-${agent.id}`}>
+                                {nls.localize('theia/ai/core/languageModelRenderer/languageModel', 'Language Model') + ': '}
+                            </label>
+                            <select
+                                className="theia-select"
+                                id={`model-select-${agent.id}-${requirement.purpose}`}
+                                value={requirement.identifier}
+                                onChange={event => onSelectedModelChange(requirement.purpose, event)}
+                            >
+                                <option value=""></option>
+                                {/* Aliases first, then languange models */}
+                                {aliases?.sort((a, b) => a.id.localeCompare(b.id)).map(alias => (
+                                    <option key={`alias/${alias.id}`} value={alias.id} className='ai-language-model-item-ready'>{`[alias] ${alias.id}`}</option>
+                                ))}
+                                {languageModels?.sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id)).map(model => {
+                                    const isNotReady = model.status.status !== 'ready';
+                                    return (
+                                        <option
+                                            key={model.id}
+                                            value={model.id}
+                                            className={isNotReady ? 'ai-language-model-item-not-ready' : 'ai-language-model-item-ready'}
+                                            title={isNotReady && model.status.message ? model.status.message : undefined}
+                                        >
+                                            {model.name ?? model.id} {isNotReady ? '✗' : '✓'}
+                                        </option>
+                                    );
+                                })}
+                            </select>
+                        </div>
+                        {/* If alias is selected, show what it currently evaluates to */}
+                        {isAlias && (
+                            <div className="ai-alias-evaluates-to-container">
+                                <label className="ai-alias-evaluates-to-label">{nls.localize('theia/ai/core/modelAliasesConfiguration/evaluatesTo', 'Evaluates to')}:</label>
+                                {resolvedModel ? (
+                                    <span className="ai-alias-evaluates-to-value">
+                                        {resolvedModel.name ?? resolvedModel.id}
+                                        {resolvedModel.status.status === 'ready' ? (
+                                            <span className="ai-model-status-ready" title="Ready">✓</span>
+                                        ) : (
+                                            <span className="ai-model-status-not-ready" title={resolvedModel.status.message || 'Not ready'}>✗</span>
+                                        )}
+                                    </span>
+                                ) : (
+                                    <span className="ai-alias-evaluates-to-unresolved">
+                                        {nls.localize('theia/ai/core/modelAliasesConfiguration/noResolvedModel', 'No model ready for this alias.')}
+                                        <span className="ai-model-status-not-ready" title={'No model ready'}>✗</span>
+                                    </span>
+                                )}
+                            </div>
+                        )}
+                        <hr />
+                    </div>
+                </React.Fragment>
+            );
+        })}
     </div>;
 };