@theia/ai-ide 1.62.0-next.3 → 1.62.1

package/src/browser/style/index.css

@@ -127,6 +127,326 @@
   margin-left: 0;
 }
 
+/* Prompt Fragments Configuration Styles */
+.ai-prompt-fragments-configuration {
+  padding: var(--theia-ui-padding);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.prompt-fragments-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--theia-panelTitle-activeBorder);
+}
+
+.prompt-fragments-header h2 {
+  margin: 0;
+}
+
+.global-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.global-action-button {
+  padding: 6px 12px;
+  background-color: transparent;
+  color: var(--theia-foreground);
+  border: 1px solid var(--theia-border);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.global-action-button:hover {
+  background-color: var(--theia-list-hoverBackground);
+}
+
+.prompt-fragments-container {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.prompt-fragment-group {
+  border: 1px solid var(--theia-panelTitle-activeBorder);
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 15px;
+  background-color: var(--theia-editorWidget-background);
+}
+
+.prompt-customization {
+  border: 1px solid var(--theia-panelTitle-activeBorder);
+  border-radius: 6px;
+  margin-bottom: 10px;
+  background-color: var(--theia-editor-background);
+}
+
+.prompt-customization.active-customization {
+  border: 3px solid var(--theia-successBackground);
+}
+
+.prompt-customization-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+}
+
+.prompt-customization-title {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.prompt-customization-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.prompt-customization-description {
+  padding: 0px 15px;
+  color: var(--theia-descriptionForeground);
+  font-size: 12px;
+  margin-bottom: 5px;
+  font-style: italic;
+}
+
+.expansion-icon {
+  color: var(--theia-descriptionForeground);
+  font-size: 14px;
+}
+
+.template-action-button {
+  background-color: transparent;
+  color: var(--theia-foreground);
+  border: 1px solid var(--theia-border);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.template-action-button:hover {
+  background-color: var(--theia-list-hoverBackground);
+}
+
+.template-action-button.reset-button {
+  color: var(--theia-foreground);
+  border-color: var(--theia-border);
+}
+
+.template-action-button.config-button {
+  color: var(--theia-foreground);
+  border-color: var(--theia-border);
+}
+
+.template-action-button.delete-button {
+  color: var(--theia-errorForeground);
+  border-color: var(--theia-errorForeground);
+}
+
+.template-action-button.delete-button:hover {
+  background-color: var(--theia-errorBackground);
+}
+
+.badge {
+  font-size: 12px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.default-variant {
+  background: hsla(0, 0%, 68%, 0.31);
+  color: var(--theia-foreground);
+}
+
+.active-indicator {
+  background-color: var(--theia-successBackground);
+  color: var(--theia-editor-background);
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.selected-indicator {
+  background-color: var(--theia-charts-blue);
+  color: var(--theia-editor-background);
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.source-uri-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--theia-foreground);
+  border: 1px solid var(--theia-border);
+  border-radius: 4px;
+  height: 22px;
+  width: 22px;
+  margin-left: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.source-uri-button:hover {
+  background-color: var(--theia-list-hoverBackground);
+}
+
+.no-fragments {
+  text-align: center;
+  padding: 30px;
+  color: var(--theia-descriptionForeground);
+  font-style: italic;
+}
+
+/* Template content collapsable styles */
+.template-content-container {
+  padding: 10px;
+  background-color: var(--theia-list-focusBackground);
+}
+
+.template-toggle-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.template-toggle-button:hover {
+  background-color: var(--theia-list-hoverBackground);
+}
+
+.template-expansion-icon {
+  margin-right: 8px;
+  color: var(--theia-descriptionForeground);
+  font-size: 14px;
+}
+
+.template-content {
+  margin-top: 10px;
+  padding: 10px;
+  background-color: var(--theia-editor-inactiveSelectionBackground);
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.template-content pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.agent-chips-container {
+  display: flex;
+  gap: 6px;
+}
+
+.agent-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--theia-charts-blue);
+  color: var(--theia-editor-background);
+  gap: 6px;
+  padding: 6px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+}
+
+/* Prompt Variants improvements */
+.prompt-variants-container {
+  margin-bottom: 20px;
+}
+
+.prompt-fragment-section {
+  border: 1px solid var(--theia-panelTitle-activeBorder);
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 15px;
+  background-color: var(--theia-editorWidget-background);
+}
+
+.prompt-fragment-section.selected-variant {
+  border: 3px solid var(--theia-charts-blue);
+}
+
+.prompt-fragment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  cursor: pointer;
+  background-color: var(--theia-editor-background);
+  transition: background-color 0.2s;
+}
+
+.prompt-fragment-header.expanded {
+  border-bottom: 1px solid var(--theia-panelTitle-activeBorder);
+}
+
+.prompt-fragment-header:hover {
+  background-color: var(--theia-list-hoverBackground);
+}
+
+.prompt-fragment-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.prompt-fragment-title h2, h4 {
+  margin-right: 8px;
+  margin: 0;
+}
+
+.prompt-fragment-title .active-indicator {
+  margin-right: 4px;
+}
+
+.prompt-fragment-body {
+  padding: 15px;
+}
+
+.prompt-fragment-description {
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: var(--theia-descriptionForeground);
+}
+
+.section-header {
+  margin: 10px 0;
+  color: var(--theia-foreground);
+  font-size: 14px;
+}
+
 /* MCP Configuration Styles */
 .mcp-configuration-container {
   padding: 16px;

package/src/browser/template-preference-contribution.ts

@@ -16,7 +16,7 @@
 
 import { FrontendApplicationContribution, PreferenceService } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { FrontendPromptCustomizationServiceImpl, PromptCustomizationProperties } from '@theia/ai-core/lib/browser/frontend-prompt-customization-service';
+import { DefaultPromptFragmentCustomizationService, PromptFragmentCustomizationProperties } from '@theia/ai-core/lib/browser/frontend-prompt-customization-service';
 import {
     PROMPT_TEMPLATE_WORKSPACE_DIRECTORIES_PREF,
     PROMPT_TEMPLATE_ADDITIONAL_EXTENSIONS_PREF,
@@ -31,8 +31,8 @@ export class TemplatePreferenceContribution implements FrontendApplicationContri
     @inject(PreferenceService)
     protected readonly preferenceService: PreferenceService;
 
-    @inject(FrontendPromptCustomizationServiceImpl)
-    protected readonly customizationService: FrontendPromptCustomizationServiceImpl;
+    @inject(DefaultPromptFragmentCustomizationService)
+    protected readonly customizationService: DefaultPromptFragmentCustomizationService;
 
     @inject(WorkspaceService)
     protected readonly workspaceService: WorkspaceService;
@@ -70,7 +70,7 @@ export class TemplatePreferenceContribution implements FrontendApplicationContri
         }
 
         const workspaceRootUri = workspaceRoot.resource;
-        const configProperties: PromptCustomizationProperties = {};
+        const configProperties: PromptFragmentCustomizationProperties = {};
 
         if (!changedPreference || changedPreference === PROMPT_TEMPLATE_WORKSPACE_DIRECTORIES_PREF) {
             const relativeDirectories = this.preferenceService.get<string[]>(PROMPT_TEMPLATE_WORKSPACE_DIRECTORIES_PREF, []);

package/src/browser/workspace-functions.ts

@@ -336,7 +336,7 @@ export class GetWorkspaceFileList implements ToolProvider {
 }
 
 @injectable()
-export class FileDiagonsticProvider implements ToolProvider {
+export class FileDiagnosticProvider implements ToolProvider {
     static ID = GET_FILE_DIAGNOSTICS_ID;
 
     @inject(WorkspaceFunctionScope)
@@ -353,8 +353,8 @@ export class FileDiagonsticProvider implements ToolProvider {
 
     getTool(): ToolRequest {
         return {
-            id: FileDiagonsticProvider.ID,
-            name: FileDiagonsticProvider.ID,
+            id: FileDiagnosticProvider.ID,
+            name: FileDiagnosticProvider.ID,
             description:
                 'A function to retrieve diagnostics associated with a specific file in the workspace. It will return a list of problems that includes the surrounding text \
             a message describing the problem, and optionally a code and a codeDescription field describing that code.',

package/src/common/architect-prompt-template.ts

@@ -8,15 +8,21 @@
 //
 // SPDX-License-Identifier: MIT
 // *****************************************************************************
-import { PromptTemplate } from '@theia/ai-core/lib/common';
-import { GET_WORKSPACE_FILE_LIST_FUNCTION_ID, FILE_CONTENT_FUNCTION_ID, GET_WORKSPACE_DIRECTORY_STRUCTURE_FUNCTION_ID } from './workspace-functions';
-import { CONTEXT_FILES_VARIABLE_ID } from './context-variables';
+import { PromptVariantSet } from '@theia/ai-core/lib/common';
+import {
+    GET_WORKSPACE_FILE_LIST_FUNCTION_ID, FILE_CONTENT_FUNCTION_ID, GET_WORKSPACE_DIRECTORY_STRUCTURE_FUNCTION_ID, SEARCH_IN_WORKSPACE_FUNCTION_ID,
+    GET_FILE_DIAGNOSTICS_ID
+} from './workspace-functions';
+import { CONTEXT_FILES_VARIABLE_ID, TASK_CONTEXT_SUMMARY_VARIABLE_ID } from './context-variables';
+import { UPDATE_CONTEXT_FILES_FUNCTION_ID } from './context-functions';
 
 export const ARCHITECT_TASK_SUMMARY_PROMPT_TEMPLATE_ID = 'architect-task-summary';
 
-export const architectPromptTemplate = <PromptTemplate>{
+export const architectVariants = <PromptVariantSet>{
     id: 'architect-system',
-    template: `{{!-- This prompt is licensed under the MIT License (https://opensource.org/license/mit).
+    defaultVariant: {
+        id: 'architect-system-default',
+        template: `{{!-- This prompt is licensed under the MIT License (https://opensource.org/license/mit).
 Made improvements or adaptations to this prompt template? We’d love for you to share it with the community! Contribute back here:
 https://github.com/eclipse-theia/theia/discussions/new?category=prompt-template-contribution --}}
 # Instructions
@@ -38,18 +44,51 @@ Use the following functions to interact with the workspace files as needed:
 3. **Navigate Step-by-Step**: Move into subdirectories only as needed, confirming each directory level.
 
 ## Additional Context
-
-The following files have been provided for additional context. Some of them may also be referred to by the user. \
-Always look at the relevant files to understand your task using the function ~{${FILE_CONTENT_FUNCTION_ID}}.
+The following files have been provided for additional context. Some of them may also be referred to by the user (e.g. "this file" or "the attachment"). \
+Always look at the relevant files to understand your task using the function ~{${FILE_CONTENT_FUNCTION_ID}}
 {{${CONTEXT_FILES_VARIABLE_ID}}}
 
 {{prompt:project-info}}
 `
-};
+    },
+    variants: [
+        {
+            id: 'architect-system-next',
+            template: `{{!-- This prompt is licensed under the MIT License (https://opensource.org/license/mit).
+Made improvements or adaptations to this prompt template? We’d love for you to share it with the community! Contribute back here:
+https://github.com/eclipse-theia/theia/discussions/new?category=prompt-template-contribution --}}
+# Instructions
+
+You are an AI assistant integrated into Theia IDE, designed to assist software developers. You can't change any files, but you can navigate and read the users workspace using \
+the provided functions. Therefore describe and explain the details or procedures necessary to achieve the desired outcome. If file changes are necessary to help the user, be \
+aware that there is another agent called 'Coder' that can suggest file changes. In this case you can create a description on what to do and tell the user to ask '@Coder' to \
+implement the change plan. If you refer to files, always mention the workspace-relative path.\
 
-export const architectTaskSummaryPromptTemplate: PromptTemplate = {
-    id: ARCHITECT_TASK_SUMMARY_PROMPT_TEMPLATE_ID,
-    template: `{{!-- This prompt is licensed under the MIT License (https://opensource.org/license/mit).
+## Context Retrieval
+Use the following functions to interact with the workspace files if you require context:
+- **~{${GET_WORKSPACE_DIRECTORY_STRUCTURE_FUNCTION_ID}}**
+- **~{${GET_WORKSPACE_FILE_LIST_FUNCTION_ID}}**
+- **~{${FILE_CONTENT_FUNCTION_ID}}**
+- **~{${SEARCH_IN_WORKSPACE_FUNCTION_ID}}**
+
+Remember file locations that are relevant for completing your tasks using **~{${UPDATE_CONTEXT_FILES_FUNCTION_ID}}**
+Only add files that are really relevant to look at later. Only add files that are really relevant to look at later.
+
+## File Validation
+Use the following function to retrieve a list of problems in a file if the user requests fixes in a given file: **~{${GET_FILE_DIAGNOSTICS_ID}}**
+## Additional Context
+The following files have been provided for additional context. Some of them may also be referred to by the user (e.g. "this file" or "the attachment"). \
+Always look at the relevant files to understand your task using the function ~{${FILE_CONTENT_FUNCTION_ID}}
+{{${CONTEXT_FILES_VARIABLE_ID}}}
+
+{{prompt:project-info}}
+
+{{${TASK_CONTEXT_SUMMARY_VARIABLE_ID}}}
+`
+        },
+        {
+            id: ARCHITECT_TASK_SUMMARY_PROMPT_TEMPLATE_ID,
+            template: `{{!-- This prompt is licensed under the MIT License (https://opensource.org/license/mit).
 Made improvements or adaptations to this prompt template? We'd love for you to share it with the community! Contribute back here:
 https://github.com/eclipse-theia/theia/discussions/new?category=prompt-template-contribution --}}
 
@@ -66,6 +105,7 @@ Skip irrelevant information, e.g. for discussions, only sum up the final result.
 4. If any part of the task is ambiguous, note the ambiguity so that it can be clarified later.
 
 Focus on providing actionable steps and implementation guidance. The coding agent needs practical help with this specific coding task.
-`,
-    variantOf: 'architect-system'
+`
+        }
+    ]
 };