@gitlab/duo-ui 8.13.2 → 8.14.0

package/src/components/chat/components/duo_chat_message/message_types/message_workflow_end.vue

@@ -0,0 +1,32 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import AgentMessage from './message_agent.vue';
+
+export const WORKFLOW_NEW_APP = 'workflow-new';
+
+export default {
+  name: 'DuoChatWorkflowEndMessage',
+  components: {
+    AgentMessage,
+    GlButton,
+  },
+  workflowEndMessage: {
+    content:
+      "Review the changes. To improve the implementation, create another workflow and describe the specific changes you'd like to see.",
+  },
+  newRoute: {
+    name: WORKFLOW_NEW_APP,
+  },
+};
+</script>
+<template>
+  <agent-message :message="$options.workflowEndMessage">
+    <template #message="{ content }">
+      <p>
+        {{ content }}
+      </p>
+
+      <gl-button :to="$options.newRoute" class="gl-mt-4">New workflow</gl-button>
+    </template>
+  </agent-message>
+</template>

package/src/components/chat/constants.js

@@ -24,6 +24,9 @@ export const MESSAGE_MODEL_ROLES = {
   user: 'user',
   system: 'system',
   assistant: 'assistant',
+  tool: 'tool',
+  request: 'request',
+  workflow_end: 'workflow_end',
 };
 
 export const SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED = true;

package/src/components/chat/duo_chat.vue

@@ -678,6 +678,13 @@ export default {
        */
       this.$emit('delete-thread', threadId);
     },
+    onOpenFilePath(filePath) {
+      /**
+       * Emitted when a file path link is clicked in a chat message.
+       * @param {String} filePath The file path to open
+       */
+      this.$emit('open-file-path', filePath);
+    },
   },
   i18n,
 };
@@ -767,6 +774,7 @@ export default {
             @copy-code-snippet="onCopyCodeSnippet"
             @copy-message="onCopyMessage"
             @get-context-item-content="onGetContextItemContent"
+            @open-file-path="onOpenFilePath"
           />
           <template v-if="!hasMessages && !isLoading">
             <div

package/src/components/chat/mock_data.js

@@ -44,6 +44,36 @@ export const MOCK_RESPONSE_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
 };
 
+export const MOCK_TOOL_MESSAGE = {
+  id: '123',
+  content: "Search for 'duo.*chat.*message' in directory",
+  message_type: MESSAGE_MODEL_ROLES.tool,
+};
+
+export const MOCK_TOOL_MESSAGE_WITH_LINK = {
+  id: '123',
+  content: "Search for 'duo.*chat.*message' in directory",
+  message_type: MESSAGE_MODEL_ROLES.tool,
+  tool_info: {
+    args: {
+      file_path: '/path/to/file.js',
+    },
+  },
+};
+
+export const MOCK_REQUEST_MESSAGE = {
+  id: '123',
+  content:
+    'On the left, review the proposed plan. Then ask questions or request changes. To execute the plan, select Approve plan.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+};
+
+export const MOCK_WORKFLOW_END_MESSAGE = {
+  id: '123',
+  content: "Search for 'duo.*chat.*message' in directory",
+  message_type: MESSAGE_MODEL_ROLES.workflow_end,
+};
+
 export const generateSeparateChunks = (n) => {
   const res = [];
   for (let i = 1; i <= n; i += 1) {