@gitlab/duo-ui 10.20.0 → 10.22.0

package/src/components/chat/mock_data.js

@@ -169,6 +169,105 @@ export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_PARAMS = {
   role: 'request',
 };
 
+export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST = {
+  id: '125',
+  content: 'Tool create_merge_request requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_merge_request',
+    args: {
+      project_id: 123,
+      source_branch: 'rename-all-spec-files',
+      target_branch: 'main',
+      title: 'Rename all the *.spec.ts files to *.test.ts',
+      description:
+        '## What does this MR do?\n\nThis MR updates the `group` field in the `web_ide_language_server` beta feature flag configuration from `group::remote development` to `group:: editor extensions`.\n\n## Related issues\n\nThis change aligns the feature flag with the correct group ownership.\n\n## Changes made\n\n- Updated `config/feature_flags/beta/web_ide_language_server.yml`\n- Changed group field from `group::remote development` to `group:: editor extensions`\n\n## Checklist\n\n- [x] Feature flag configuration updated\n- [x] Group field correctly set to `group:: editor extensions`',
+    },
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request',
+};
+
+export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND = {
+  id: '125',
+  content: 'Tool run_command requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'run_command',
+    args: {
+      program: 'ls',
+      args: '-a | grep package.json',
+    },
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request',
+};
+
+export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_ISSUE = {
+  id: '125',
+  content: 'Tool run_command requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_issue',
+    args: {
+      project_id: 123,
+      title: 'CSP bug in VSCode Fork prevents loading external web views in Web IDE',
+      description:
+        "## Problem\n\nThe VSCode Fork implementation has a Content Security Policy (CSP) bug that prevents external web views from loading properly in the Web IDE.\n\n## Impact\n\n- External web views fail to load within the Web IDE environment\n- This affects functionality that relies on embedding external content\n- Users may experience broken or non-functional web view components\n\n## Expected Behavior\n\nExternal web views should load successfully within the Web IDE when permitted by security policies.\n\n## Current Behavior\n\nExternal web views are blocked due to CSP restrictions in the VSCode Fork implementation.\n\n## Technical Details\n\nThis appears to be related to how the VSCode Fork handles Content Security Policy headers, which may be overly restrictive for the Web IDE's use case with external web views.\n\n## Next Steps\n\n- [ ] Investigate the specific CSP directives causing the issue\n- [ ] Determine which external domains/resources need to be allowlisted\n- [ ] Implement appropriate CSP modifications in the VSCode Fork\n- [ ] Test the fix with various external web view scenarios\n- [ ] Ensure security implications are properly evaluated",
+      labels: 'bug,web-ide,vscode-fork,csp,security',
+    },
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request',
+};
+
+export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT = {
+  id: '125',
+  content: 'Tool create_commit requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_commit',
+    args: {
+      project_id: 35104827,
+      branch: 'feat/add-web-ide-duo-chat-package',
+      start_branch: 'main',
+      commit_message:
+        'feat: add web-ide-duo-chat package with TypeScript setup\n\n- Create new package @gitlab/web-ide-duo-chat\n- Set up TypeScript configuration following project patterns\n- Add src directory with index.ts entry point\n- Configure package.json with workspace dependencies\n- Add package reference to root tsconfig.json',
+      actions: [
+        {
+          action: 'create',
+          file_path: 'packages/web-ide-duo-chat/package.json',
+          content:
+            '{\n  "name": "@gitlab/web-ide-duo-chat",\n  "version": "0.0.1",\n  "main": "./src/index.ts",\n  "license": "MIT",\n  "packageManager": "yarn@3.2.0",\n  "devDependencies": {\n    "@gitlab/utils-test": "workspace:*"\n  },\n  "dependencies": {\n    "@gitlab/logger": "workspace:*",\n    "@gitlab/web-ide-types": "workspace:*"\n  },\n  "publishConfig": {\n    "main": "./lib/index.js"\n  }\n}\n',
+        },
+        {
+          action: 'create',
+          file_path: 'packages/web-ide-duo-chat/src/types.ts',
+          content:
+            "/**\n * Represents a chat message in the Duo Chat interface\n */\nexport interface ChatMessage {\n  /**\n   * Unique identifier for the message\n   */\n  id: string;\n  /**\n   * The content of the message\n   */\n  content: string;\n  /**\n   * Who sent the message\n   */\n  sender: 'user' | 'assistant';\n  /**\n   * Timestamp when the message was created\n   */\n  timestamp: Date;\n  /**\n   * Optional metadata for the message\n   */\n  metadata?: Record<string, unknown>;\n}\n\n/**\n * Represents a chat conversation\n */\nexport interface ChatConversation {\n  /**\n   * Unique identifier for the conversation\n   */\n  id: string;\n  /**\n   * Title of the conversation\n   */\n  title: string;\n  /**\n   * Messages in the conversation\n   */\n  messages: ChatMessage[];\n  /**\n   * When the conversation was created\n   */\n  createdAt: Date;\n  /**\n   * When the conversation was last updated\n   */\n  updatedAt: Date;\n}\n\n/**\n * Event types for Duo Chat\n */\nexport type DuoChatEvent = \n  | { type: 'message-sent'; payload: ChatMessage }\n  | { type: 'message-received'; payload: ChatMessage }\n  | { type: 'conversation-started'; payload: ChatConversation }\n  | { type: 'conversation-ended'; payload: { conversationId: string } }\n  | { type: 'error'; payload: { error: Error; context?: string } };\n\n/**\n * Callback function for handling Duo Chat events\n */\nexport type DuoChatEventHandler = (event: DuoChatEvent) => void;\n\n/**\n * Interface for Duo Chat service providers\n */\nexport interface DuoChatProvider {\n  /**\n   * Send a message and get a response\n   */\n  sendMessage(message: string, conversationId?: string): Promise<ChatMessage>;\n  /**\n   * Start a new conversation\n   */\n  startConversation(title?: string): Promise<ChatConversation>;\n  /**\n   * Get conversation history\n   */\n  getConversation(conversationId: string): Promise<ChatConversation | null>;\n  /**\n   * List all conversations\n   */\n  listConversations(): Promise<ChatConversation[]>;\n}\n",
+        },
+        {
+          action: 'update',
+          file_path: 'tsconfig.json',
+          content:
+            '{\n  "extends": "./tsconfig.base.json",\n  "references": [\n    { "path": "./packages/example" },\n    { "path": "./packages/gitlab-api-client" },\n    { "path": "./packages/gitlab-api-client-factory" },\n    { "path": "./packages/logger" },\n    { "path": "./packages/oauth-client" },\n    { "path": "./packages/utils-crypto" },\n    { "path": "./packages/utils-escape" },\n    { "path": "./packages/utils-test" },\n    { "path": "./packages/utils-path" },\n    { "path": "./packages/vscode-bootstrap" },\n    { "path": "./packages/vscode-mediator-commands" },\n    { "path": "./packages/web-ide" },\n    { "path": "./packages/web-ide-duo-chat" },\n    { "path": "./packages/web-ide-fs" },\n    { "path": "./packages/web-ide-types" },\n    { "path": "./packages/web-ide-interop" },\n    { "path": "./packages/vscode-extension-web-ide" },\n    { "path": "./packages/cross-origin-channel" },\n    { "path": "./packages/cloudflare" }\n  ],\n  "files": []\n}\n',
+        },
+        {
+          action: 'move',
+          file_path: 'yarn.lock',
+          previous_path: 'yarn.lock.bkp',
+        },
+      ],
+    },
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'assistant',
+};
+
 export const MOCK_WORKFLOW_END_MESSAGE = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",

package/src/components/ui/duo_layout/duo_layout.vue

@@ -0,0 +1,95 @@
+<script>
+import VueResizable from 'vue-resizable';
+import SideRail from '../side_rail/side_rail.vue';
+
+export default {
+  name: 'DuoLayout',
+  components: {
+    VueResizable,
+    SideRail,
+  },
+  props: {
+    /**
+     * Determines if the component should be resizable. When true, it renders inside
+     * a `vue-resizable` wrapper; otherwise, a standard `div` is used.
+     */
+    shouldRenderResizable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Defines the dimensions of the layout container when resizable.
+     * By default, the height is set to match the height of the browser window,
+     * and the width is fixed at 400px. The `top` position is left undefined,
+     * allowing it to be dynamically adjusted if needed.
+     */
+    dimensions: {
+      type: Object,
+      required: false,
+      default: () => ({
+        width: undefined,
+        height: undefined,
+        top: undefined,
+        left: undefined,
+        maxWidth: undefined,
+        minWidth: 400,
+        maxHeight: undefined,
+        minHeight: 400,
+      }),
+    },
+    /**
+     * Whether the layout is hidden
+     */
+    isHidden: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    updateSize(e) {
+      /**
+       * Emitted when the layout is resized
+       * @param {Object} e The resize event data
+       */
+      this.$emit('resize', e);
+    },
+  },
+};
+</script>
+<template>
+  <component
+    :is="shouldRenderResizable ? 'vue-resizable' : 'div'"
+    v-if="!isHidden"
+    :width="shouldRenderResizable ? dimensions.width : null"
+    :height="shouldRenderResizable ? dimensions.height : null"
+    :max-width="shouldRenderResizable ? dimensions.maxWidth : null"
+    :max-height="shouldRenderResizable ? dimensions.maxHeight : null"
+    :min-width="shouldRenderResizable ? dimensions.minWidth : null"
+    :left="shouldRenderResizable ? dimensions.left : null"
+    :top="shouldRenderResizable ? dimensions.top : null"
+    :fit-parent="true"
+    :min-height="shouldRenderResizable ? dimensions.minHeight : null"
+    :class="{
+      'duo-chat-resizable': shouldRenderResizable,
+      'non-resizable-wrapper': !shouldRenderResizable,
+    }"
+    :active="shouldRenderResizable ? ['l', 't', 'lt'] : null"
+    data-testid="duo-layout-component"
+    @resize:end="updateSize"
+  >
+    <aside
+      class="markdown-code-block duo-chat gl-align-items gl-bottom-0 gl-flex gl-h-full gl-max-h-full gl-flex-row gl-bg-strong gl-py-3 gl-pl-3"
+    >
+      <main
+        class="content flex-none gl-h-full gl-min-w-0 gl-grow gl-overflow-y-auto gl-rounded-[1rem] gl-bg-neutral-0"
+      >
+        <slot name="mainview"></slot>
+      </main>
+      <aside class="gl-flex gl-h-full gl-min-h-full gl-bg-strong gl-px-3 gl-py-2">
+        <slot name="siderail"></slot>
+      </aside>
+    </aside>
+  </component>
+</template>

package/src/components/ui/side_rail/side_rail.vue

@@ -0,0 +1,56 @@
+<script>
+import { GlButtonGroup, GlButton, GlAvatar, GlTooltipDirective } from '@gitlab/ui';
+
+export default {
+  name: 'SideRail',
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlButtonGroup,
+    GlButton,
+    GlAvatar,
+  },
+  props: {
+    /**
+     * String to display the empty state of recent content
+     */
+    buttons: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    onClick(buttonName) {
+      this.$emit('click', buttonName);
+    },
+  },
+};
+</script>
+<template>
+  <gl-button-group :vertical="true">
+    <template v-for="(button, buttonName) in buttons">
+      <div
+        v-if="button.dividerBefore"
+        :key="`${buttonName}-divider`"
+        class="gl-mx-auto gl-my-3 gl-h-1 gl-w-5 gl-border-0 gl-border-t-1 gl-border-solid gl-border-[#7759C233]"
+        name="divider"
+      ></div>
+      <gl-button
+        v-if="button.render"
+        :key="`${buttonName}-button`"
+        v-gl-tooltip
+        :title="button.title"
+        category="tertiary"
+        variant="default"
+        size="medium"
+        :icon="button.icon"
+        active-class="gl-active"
+        @click="onClick(buttonName)"
+      >
+        <gl-avatar v-if="button.avatar" :size="32" :entity-name="button.avatar" shape="circle" />
+      </gl-button>
+    </template>
+  </gl-button-group>
+</template>

package/src/index.js

@@ -42,5 +42,7 @@ export { InsertCodeSnippetElement as DuoChatInsertCodeSnippetElement } from './c
 export { default as DuoNavigationBar } from './components/ui/duo_navigation_bar/duo_navigation_bar.vue';
 export { default as DuoRecentCollapsible } from './components/ui/duo_recent_collapsible/duo_recent_collapsible.vue';
 export { default as DuoRecentContent } from './components/ui/duo_recent_content/duo_recent_content.vue';
+export { default as DuoLayout } from './components/ui/duo_layout/duo_layout.vue';
+export { default as SideRail } from './components/ui/side_rail/side_rail.vue';
 
 export { addDuoMarkdownPlugin } from './components/chat/markdown_renderer';

package/src/utils/object.js

@@ -0,0 +1,4 @@
+import mapKeys from 'lodash/mapKeys';
+import camelCase from 'lodash/camelCase';
+
+export const convertKeysToCamelCase = (obj = {}) => mapKeys(obj, (value, key) => camelCase(key));

package/translations.js

@@ -7,12 +7,12 @@ export default {
   'AgenticDuoChat.chatDefaultPredefinedPromptsCreateTemplate': 'How do I create a template?',
   'AgenticDuoChat.chatDefaultPredefinedPromptsForkProject': 'How do I fork a project?',
   'AgenticDuoChat.chatDefaultTitle': 'GitLab Duo Agentic Chat',
-  'AgenticDuoChat.chatDisclamer':
-    'Chat can autonomously change code. Responses and changes can be inaccurate. Review carefully.',
+  'AgenticDuoChat.chatDisclamer': 'Responses may be inaccurate. Verify before use.',
   'AgenticDuoChat.chatEmptyStateTitle':
     '👋 I am GitLab Duo Agentic Chat, your personal AI-powered assistant. How can I help you today?',
   'AgenticDuoChat.chatHistoryTitle': 'Chat history',
-  'AgenticDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Agentic Chat',
+  'AgenticDuoChat.chatModelPlaceholder': 'GitLab Duo Agentic Chat',
+  'AgenticDuoChat.chatPromptPlaceholderDefault': "Let's work through this together...",
   'AgenticDuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
   'AgenticDuoChat.chatSubmitLabel': 'Send chat message.',
   'AgenticDuoChat.overLimitCharacterCountMessage': null,
@@ -33,6 +33,25 @@ export default {
   'AgenticToolRejectionModal.placeholder': "Explain why you're rejecting this tool execution...",
   'AgenticToolRejectionModal.submitText': 'Submit Rejection',
   'AgenticToolRejectionModal.title': 'Provide Rejection Reason',
+  'CreateCommitToolParams.actionWithNoContent': 'This action does not have any content.',
+  'CreateCommitToolParams.actionsCountMessage': null,
+  'CreateCommitToolParams.chmodFileActionLabel': 'Change permissions for file %{filePath}',
+  'CreateCommitToolParams.commitSummaryMessage':
+    'Create a commit in the branch %{branch} and project %{project}.',
+  'CreateCommitToolParams.createFileActionLabel': 'Create file %{filePath}',
+  'CreateCommitToolParams.deleteFileActionLabel': 'Delete file %{filePath}',
+  'CreateCommitToolParams.expandFileChanges': 'Expand file changes',
+  'CreateCommitToolParams.moveFileActionLabel': 'Move file %{filePath}',
+  'CreateCommitToolParams.readCommitMessage': 'Read commit message',
+  'CreateCommitToolParams.unknownFileActionLabel': 'Modify file %{filePath}',
+  'CreateCommitToolParams.updateFileActionLabel': 'Update file %{filePath}',
+  'CreateIssueToolParams.ACCORDION_TITLE': 'Read description',
+  'CreateIssueToolParams.ISSUE_SUMMARY_MESSAGE_BASE':
+    'Open an issue with title "%{title}" in project %{project}.',
+  'CreateIssueToolParams.ISSUE_SUMMARY_MESSAGE_WITH_LABELS': 'Assign the labels %{labels}.',
+  'CreateMergeRequestToolParams.ACCORDION_TITLE': 'Read description',
+  'CreateMergeRequestToolParams.MERGE_REQUEST_SUMMARY_MESSAGE':
+    'Open a merge request with title "%{title}" in project %{project} from branch %{sourceBranch} to branch %{targetBranch}.',
   'DuoChat.chatBackLabel': 'Back to history',
   'DuoChat.chatBackToChatToolTip': 'Back to chat',
   'DuoChat.chatCancelLabel': 'Cancel',
@@ -46,9 +65,10 @@ export default {
     '👋 I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?',
   'DuoChat.chatHistoryInfo': 'Inactive chats are deleted after 30 days.',
   'DuoChat.chatHistoryToolTip': 'Chat history',
+  'DuoChat.chatModelPlaceholder': 'GitLab Duo Chat',
   'DuoChat.chatNewLabel': 'New chat',
   'DuoChat.chatNewToolTip': 'New chat',
-  'DuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
+  'DuoChat.chatPromptPlaceholderDefault': "Let's work through this together...",
   'DuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
   'DuoChat.chatSubmitLabel': 'Send chat message.',
   'DuoChat.chatTitle': 'GitLab Duo Chat',
@@ -105,6 +125,9 @@ export default {
   'MessageToolApproval.approveText': 'Approve',
   'MessageToolApproval.approvingText': 'Approving...',
   'MessageToolApproval.cancelText': 'Cancel',
+  'MessageToolApproval.createCommit': 'Duo wants to push a commit.',
+  'MessageToolApproval.createIssue': 'Duo wants to open an issue.',
+  'MessageToolApproval.createMergeRequest': 'Duo wants to create a merge request.',
   'MessageToolApproval.denialReasonLabel': 'Rejection reason',
   'MessageToolApproval.denialReasonPlaceholder':
     "Tell Duo why you're rejecting this tool execution...",
@@ -112,10 +135,10 @@ export default {
   'MessageToolApproval.denyingText': 'Denying...',
   'MessageToolApproval.noParametersText': 'No parameters will be sent with this request.',
   'MessageToolApproval.parametersText': 'Request',
+  'MessageToolApproval.runCommand': 'Duo wants to run a command.',
   'MessageToolApproval.toolApprovalDescription':
     'GitLab Duo Agentic Chat wants to execute a tool. Do you want to proceed?',
-  'MessageToolApproval.toolApprovalTitle':
-    'Duo would like to execute a tool. Do you want to proceed?',
   'MessageToolApproval.toolLabel': 'Tool:',
+  'MessageToolApproval.toolStatus': 'Pending',
   'MessageToolApproval.toolUnknown': 'Unknown',
 };