@gitlab/duo-ui 8.13.2 → 8.14.1

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

@@ -0,0 +1,34 @@
+<script>
+import BaseMessage from './message_base.vue';
+
+export default {
+  name: 'DuoChatAgentMessage',
+  components: {
+    BaseMessage,
+  },
+  props: {
+    message: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    hasError() {
+      return Boolean(this.message?.errors?.length);
+    },
+  },
+};
+</script>
+<template>
+  <base-message
+    :message="message"
+    class="gl-rounded-bl-none gl-border-1 gl-border-solid gl-text-gray-900 gl-p-4 gl-border-gray-50"
+    :class="{
+      'gl-border-red-100': hasError,
+    }"
+  >
+    <template #message="slotProps">
+      <slot name="message" v-bind="slotProps"> </slot>
+    </template>
+  </base-message>
+</template>

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

@@ -0,0 +1,84 @@
+<script>
+import { GlIcon, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
+import { renderDuoChatMarkdownPreview } from '../../../markdown_renderer';
+
+export default {
+  name: 'DuoChatBaseMessage',
+  components: {
+    GlIcon,
+  },
+  directives: {
+    SafeHtml,
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: {
+    // Note, we likely might move away from Provide/Inject for this
+    // and only ship the versions that are currently in the default
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3953#note_1762834219
+    // for more context.
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => (element) => {
+        element.classList.add('gl-markdown', 'gl-compact-markdown', 'gl-text-sm');
+      },
+    },
+    renderMarkdown: {
+      from: 'renderMarkdown',
+      default: () => renderDuoChatMarkdownPreview,
+    },
+  },
+  props: {
+    /**
+     * A message object
+     */
+    message: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    messageContent() {
+      return this.renderMarkdown(this.message.content);
+    },
+    renderedError() {
+      return this.renderMarkdown(this.message.errors?.join('; ') || '');
+    },
+    hasError() {
+      return Boolean(this.message?.errors?.length);
+    },
+  },
+  mounted() {
+    this.hydrateContentWithGFM();
+  },
+  updated() {
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    hydrateContentWithGFM() {
+      if (this.$refs.content) {
+        this.$nextTick(this.renderGFM(this.$refs.content, this.message.role));
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div class="duo-chat-message gl-mb-4 gl-rounded-lg gl-leading-20 gl-break-anywhere">
+    <gl-icon
+      v-if="hasError"
+      name="status_warning_borderless"
+      :size="16"
+      class="error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600"
+      data-testid="error"
+    />
+    <div ref="content-wrapper" :class="{ 'has-error': hasError }">
+      <div v-if="hasError" ref="error-message" v-safe-html="renderedError"></div>
+      <div v-else>
+        <slot name="message" v-bind="{ content: message.content, htmlContent: messageContent }">
+          <div ref="content" v-safe-html="messageContent"></div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script>
+import AgentMessage from './message_agent.vue';
+
+export default {
+  name: 'DuoChatInputRequestedMessage',
+  components: {
+    AgentMessage,
+  },
+  props: {
+    message: {
+      required: true,
+      type: Object,
+    },
+  },
+};
+</script>
+<template>
+  <agent-message :message="message" class="duo-highlight-message input-requested" />
+</template>

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

@@ -0,0 +1,52 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import BaseMessage from './message_base.vue';
+
+export default {
+  name: 'DuoChatToolMessage',
+  components: {
+    BaseMessage,
+    GlLink,
+  },
+  provide: {
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => (element) => {
+        element.classList.add('gl-markdown', 'gl-compact-markdown');
+        element.classList.add('duo-system-message', 'gl-text-sm');
+      },
+    },
+  },
+  props: {
+    message: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    messageFilePath() {
+      return this.message.tool_info?.args?.file_path;
+    },
+  },
+  methods: {
+    onOpenFilePath() {
+      this.$emit('open-file-path', this.messageFilePath);
+    },
+  },
+};
+</script>
+<template>
+  <base-message :message="message">
+    <template #message="{ content }">
+      <span class="gl-text-sm">{{ content }}</span>
+      <gl-link
+        v-if="messageFilePath"
+        class="gl-markdown file-path-link gl-text-sm"
+        data-testid="file-path-link"
+        @click.prevent="onOpenFilePath"
+      >
+        <code>{{ messageFilePath }}</code>
+      </gl-link>
+    </template>
+  </base-message>
+</template>

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) {