@gitlab/duo-ui 10.23.1 → 11.0.0

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

@@ -44,3 +44,8 @@ export { default as DuoRecentCollapsible } from './components/ui/duo_recent_coll
 export { default as DuoRecentContent } from './components/ui/duo_recent_content/duo_recent_content.vue';
 
 export { addDuoMarkdownPlugin } from './components/chat/markdown_renderer';
+
+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 { default as WebDuoChat } from './components/chat/web_duo_chat.vue';
+export { default as WebAgenticDuoChat } from './components/agentic_chat/web_agentic_duo_chat.vue';

package/translations.js

@@ -142,4 +142,46 @@ export default {
   'MessageToolApproval.toolLabel': 'Tool:',
   'MessageToolApproval.toolStatus': 'Pending',
   'MessageToolApproval.toolUnknown': 'Unknown',
+  'WebAgenticDuoChat.chatCancelLabel': 'Cancel',
+  'WebAgenticDuoChat.chatDefaultPredefinedPromptsChangePassword':
+    'How do I change my password in GitLab?',
+  'WebAgenticDuoChat.chatDefaultPredefinedPromptsCloneRepository': 'How do I clone a repository?',
+  'WebAgenticDuoChat.chatDefaultPredefinedPromptsCreateTemplate': 'How do I create a template?',
+  'WebAgenticDuoChat.chatDefaultPredefinedPromptsForkProject': 'How do I fork a project?',
+  'WebAgenticDuoChat.chatDefaultTitle': 'GitLab Duo Agentic Chat',
+  'WebAgenticDuoChat.chatDisclamer': 'Responses may be inaccurate. Verify before use.',
+  'WebAgenticDuoChat.chatEmptyStateTitle':
+    '👋 I am GitLab Duo Agentic Chat, your personal AI-powered assistant. How can I help you today?',
+  'WebAgenticDuoChat.chatHistoryTitle': 'Chat history',
+  'WebAgenticDuoChat.chatModelPlaceholder': 'GitLab Duo Agentic Chat',
+  'WebAgenticDuoChat.chatPromptPlaceholderDefault': "Let's work through this together...",
+  'WebAgenticDuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
+  'WebAgenticDuoChat.chatSubmitLabel': 'Send chat message.',
+  'WebAgenticDuoChat.overLimitCharacterCountMessage': null,
+  'WebAgenticDuoChat.remainingCharacterCountMessage': null,
+  'WebDuoChat.chatBackLabel': 'Back to history',
+  'WebDuoChat.chatBackToChatToolTip': 'Back to chat',
+  'WebDuoChat.chatCancelLabel': 'Cancel',
+  'WebDuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',
+  'WebDuoChat.chatDefaultPredefinedPromptsCloneRepository': 'How do I clone a repository?',
+  'WebDuoChat.chatDefaultPredefinedPromptsCreateTemplate': 'How do I create a template?',
+  'WebDuoChat.chatDefaultPredefinedPromptsForkProject': 'How do I fork a project?',
+  'WebDuoChat.chatDefaultTitle': 'GitLab Duo Chat',
+  'WebDuoChat.chatDisclamer': 'Responses may be inaccurate. Verify before use.',
+  'WebDuoChat.chatDropdownMoreOptions': 'More options',
+  'WebDuoChat.chatEmptyStateTitle':
+    '👋 I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?',
+  'WebDuoChat.chatHistoryTitle': 'Chat history',
+  'WebDuoChat.chatHistoryToolTip': 'Chat history',
+  'WebDuoChat.chatModelPlaceholder': 'GitLab Duo Chat',
+  'WebDuoChat.chatNewLabel': 'New chat',
+  'WebDuoChat.chatNewToolTip': 'New chat',
+  'WebDuoChat.chatPromptPlaceholderDefault': "Let's work through this together...",
+  'WebDuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
+  'WebDuoChat.chatSubmitLabel': 'Send chat message.',
+  'WebDuoChat.chatTitle': 'GitLab Duo Chat',
+  'WebDuoChat.closeChatHeaderLabel': 'Close chat',
+  'WebDuoChat.copySessionIdFailedToast': 'Could not copy session ID',
+  'WebDuoChat.copySessionIdSuccessToast': 'Session ID copied to clipboard',
+  'WebDuoChat.copySessionIdTooltip': 'Copy session ID',
 };