fix issues found by review:

- fix prompt key of custom agent
- improve ui
- add example entry for a new custom agent file

packages/ai-chat/src/common/custom-chat-agent.ts

@@ -39,6 +39,6 @@ export class CustomChatAgent
     }
 
     set prompt(prompt: string) {
-        this.promptTemplates.push({ id: `${this.name}_system`, template: prompt });
+        this.promptTemplates.push({ id: `${this.name}_prompt`, template: prompt });
     }
 }

packages/ai-core/src/browser/ai-configuration/agent-configuration-widget.tsx

@@ -101,7 +101,9 @@ export class AIAgentConfigurationWidget extends ReactWidget {
                         </li>
                     )}
                 </ul>
-                <button style={{ marginLeft: 0 }} className='theia-button main' onClick={() => this.addCustomAgent()}>Add Custom Agent</button>
+                <div className='configuration-agents-add'>
+                    <button style={{ marginLeft: 0 }} className='theia-button main' onClick={() => this.addCustomAgent()}>Add Custom Agent</button>
+                </div>
             </div>
             <div className='configuration-agent-panel preferences-editor-widget'>
                 {this.renderAgentDetails()}

packages/ai-core/src/browser/frontend-prompt-customization-service.ts

@@ -26,6 +26,11 @@ import { AgentService } from '../common/agent-service';
 import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
 import { load } from 'js-yaml';
 
+const templateEntry = `-id: my_agent
+name: My Agent
+description: This is an example agent. Please adapt the properties to fit your needs.
+prompt: You are an example agent. Be nice and helpful to the user.`;
+
 @injectable()
 export class FrontendPromptCustomizationServiceImpl implements PromptCustomizationService {
 
@@ -224,7 +229,7 @@ export class FrontendPromptCustomizationServiceImpl implements PromptCustomizati
     async openCustomAgentYaml(): Promise<void> {
         const customAgentYamlUri = (await this.getTemplatesDirectoryURI()).resolve('customAgents.yml');
         if (! await this.fileService.exists(customAgentYamlUri)) {
-            await this.fileService.createFile(customAgentYamlUri);
+            await this.fileService.createFile(customAgentYamlUri, BinaryBuffer.fromString(templateEntry));
         }
         const openHandler = await this.openerService.getOpener(customAgentYamlUri);
         openHandler.open(customAgentYamlUri);

packages/ai-core/src/browser/style/index.css

@@ -88,3 +88,8 @@
   border-radius: calc(var(--theia-ui-padding) * 2 / 3);
   background: hsla(0, 0%, 68%, 0.31);
 }
+
+.configuration-agents-add {
+  margin-top: 3em;
+  margin-left: 0;
+}