[FEATURE] Chat field

.github/workflows/argilla.yml

@@ -21,7 +21,7 @@ jobs:
   build:
     services:
       argilla-server:
-        image: argilladev/argilla-hf-spaces:develop
+        image: argilladev/argilla-hf-spaces:pr-5482
         ports:
           - 6900:6900
         env:

argilla-frontend/assets/scss/abstract/variables/_themes.scss

@@ -53,6 +53,13 @@
   --bg-label-unselected: hsl(0, 0%, 96%);
   --bg-label-unselected-hover: hsla(0, 0%, 0%, 0.06);
   --bg-field: linear-gradient(45deg, var(--bg-opacity-2), var(--bg-opacity-1));
+  --border-field: hsl(0, 0%, 94%);
+  --bg-bubble: linear-gradient(45deg, var(--bg-opacity-3), var(--bg-opacity-1));
+  --bg-bubble-inverse: linear-gradient(
+    45deg,
+    var(--bg-opacity-1),
+    var(--bg-opacity-3)
+  );
   --bg-form: hsl(0, 0%, 100%);
   --bg-form-button-area: hsl(228, 50%, 96%);
   --fg-shortcut-key: hsla(0, 0%, 0%, 0.2);
@@ -69,6 +76,11 @@
   --bg-banner-warning: hsl(47, 83%, 91%);
   --bg-banner-error: hsl(3, 100%, 92%);
   --bg-tooltip: var(--color-dark-grey);
+  --fg-chat-1: #488d81;
+  --fg-chat-2: #e07be0;
+  --fg-chat-3: #fd926a;
+  --fg-chat-4: #d81159;
+  --fg-chat-5: #5534b4;
 }
 
 [data-theme="dark"] {
@@ -117,6 +129,13 @@
   --bg-label-unselected: hsl(214, 12%, 18%);
   --bg-label-unselected-hover: hsl(214, 12%, 20%);
   --bg-field: linear-gradient(45deg, var(--bg-opacity-4), var(--bg-opacity-2));
+  --border-field: hsl(0, 0%, 18%);
+  --bg-bubble: linear-gradient(45deg, var(--bg-opacity-4), var(--bg-opacity-2));
+  --bg-field-inverse: linear-gradient(
+    45deg,
+    var(--bg-opacity-2),
+    var(--bg-opacity-4)
+  );
   --bg-form: hsl(216 12% 14%);
   --bg-form-button-area: hsla(228, 40.18%, 59.31%, 0.2);
   --fg-shortcut-key: hsla(0, 0%, 100%, 0.4);
@@ -127,6 +146,11 @@
   --bg-banner-warning: hsl(47, 83%, 16%);
   --bg-banner-error: hsl(3, 100%, 20%);
   --bg-tooltip: hsl(207, 9%, 32%);
+  --fg-chat-1: #628e87;
+  --fg-chat-2: #af6daf;
+  --fg-chat-3: #cd8065;
+  --fg-chat-4: #bc4c75;
+  --fg-chat-5: #7a65b8;
 }
 
 [data-theme="light"] {

argilla-frontend/components/base/base-render-markdown/renderMarkdown.base.component.spec.js → argilla-frontend/components/base/base-render-markdown/MarkdownRenderer.test.js

@@ -1,8 +1,8 @@
 import { shallowMount } from "@vue/test-utils";
-import RenderMarkdownBaseComponent from "./RenderMarkdown.base.component";
+import MarkdownRenderer from "./MarkdownRenderer";
 
 const options = {
-  components: { RenderMarkdownBaseComponent },
+  components: { MarkdownRenderer },
   propsData: {
     markdown: "# example<script><TABLE> \n\n",
   },
@@ -13,28 +13,29 @@ const options = {
   },
 };
 
-describe("RenderMarkdownBaseComponent", () => {
+describe("MarkdownRenderer", () => {
   it("prevent render not allowed tags", async () => {
-    const wrapper = shallowMount(RenderMarkdownBaseComponent, options);
+    const wrapper = shallowMount(MarkdownRenderer, options);
     expect(wrapper.html().includes("<script>")).toBe(false);
   });
   it("prevent render unsanitized html", async () => {
-    const wrapper = shallowMount(RenderMarkdownBaseComponent, options);
+    const wrapper = shallowMount(MarkdownRenderer, options);
     expect(wrapper.html().includes("<TABLE>")).toBe(false);
   });
   it("render correct html", () => {
-    const wrapper = shallowMount(RenderMarkdownBaseComponent, options);
+    const wrapper = shallowMount(MarkdownRenderer, options);
     expect(wrapper.html()).toBe(
       `<div class="markdown-render --ltr">
   <h1>example</h1>
 </div>`
     );
   });
   it("add viewBox for svg", () => {
-    const wrapper = shallowMount(RenderMarkdownBaseComponent, {
+    const wrapper = shallowMount(MarkdownRenderer, {
       ...options,
       propsData: {
-        markdown: `<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>`,
+        markdown:
+          '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>',
       },
     });
     expect(wrapper.html()).toBe(
@@ -46,10 +47,11 @@ describe("RenderMarkdownBaseComponent", () => {
     );
   });
   it("not add viewBox for svg if it has defined a viewport", () => {
-    const wrapper = shallowMount(RenderMarkdownBaseComponent, {
+    const wrapper = shallowMount(MarkdownRenderer, {
       ...options,
       propsData: {
-        markdown: `<svg height="100" width="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>`,
+        markdown:
+          '<svg height="100" width="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>',
       },
     });
     expect(wrapper.html()).toBe(
@@ -62,10 +64,10 @@ describe("RenderMarkdownBaseComponent", () => {
   });
 
   it("open in other window if the node is a link", () => {
-    const wrapper = shallowMount(RenderMarkdownBaseComponent, {
+    const wrapper = shallowMount(MarkdownRenderer, {
       ...options,
       propsData: {
-        markdown: `[example](https://example.com)`,
+        markdown: "[example](https://example.com)",
       },
     });
     expect(wrapper.html()).toBe(
@@ -76,10 +78,10 @@ describe("RenderMarkdownBaseComponent", () => {
   });
 
   it("open in other window if the node already hace target blank", () => {
-    const wrapper = shallowMount(RenderMarkdownBaseComponent, {
+    const wrapper = shallowMount(MarkdownRenderer, {
       ...options,
       propsData: {
-        markdown: `<a href="https://example.com" target="_blank">example</a>`,
+        markdown: '<a href="https://example.com" target="_blank">example</a>',
       },
     });
     expect(wrapper.html()).toBe(

argilla-frontend/components/base/base-render-markdown/RenderMarkdown.base.component.vue → argilla-frontend/components/base/base-render-markdown/MarkdownRenderer.vue

@@ -56,7 +56,6 @@ marked.use(
 );
 
 export default {
-  name: "RenderMarkdownBaseComponent",
   props: {
     markdown: {
       type: String,

argilla-frontend/components/features/annotation/container/fields/RecordFields.vue

@@ -9,6 +9,7 @@
         settings,
         isTextType,
         isImageType,
+        isChatType,
       } in fields"
       :class="[isImageType ? 'fields__container--image' : '']"
       :key="id"
@@ -30,6 +31,14 @@
         :useMarkdown="settings.use_markdown"
         :searchText="recordCriteria.committed.searchText.value.text"
       />
+      <ChatField
+        v-else-if="isChatType"
+        :name="name"
+        :title="title"
+        :useMarkdown="settings.use_markdown"
+        :content="content"
+        :searchText="recordCriteria.committed.searchText.value.text"
+      />
       <ImageField v-else :name="name" :title="title" :content="content" />
     </div>
   </div>

argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="chat" :key="title">
+    <span class="chat__title" v-text="title" />
+    <div
+      :id="`fields-content-${name}`"
+      class="chat__wrapper"
+      :class="checkIfAreLessThanTwoRoles ? '--simple' : '--multiple'"
+    >
+      <div v-for="({ role, content: text }, index) in content" :key="index">
+        <span
+          :class="[
+            'chat__item',
+            checkIfAreLessThanTwoRoles && index % 2 == 0
+              ? 'chat__item--right'
+              : 'chat__item--left',
+          ]"
+        >
+          <span
+            class="chat__role"
+            v-if="role !== content[index - 1]?.role"
+            v-text="role"
+            :style="{
+              color: getColorForRole(role),
+            }"
+          />
+
+          <div
+            class="chat__bubble"
+            :style="{
+              borderColor: `hsl(from ${getColorForRole(role)} h s l / 20%)`,
+            }"
+          >
+            <MarkdownRenderer v-if="useMarkdown" :markdown="text" />
+            <span v-else v-html="text" /><template>
+              <style :key="name" scoped>
+                ::highlight(search-text-highlight-{{name}}) {
+                  color: #ff675f;
+                }
+              </style>
+            </template>
+          </div>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useChatFieldViewModel } from "./useChatFieldViewModel";
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    searchText: {
+      type: String,
+      default: "",
+    },
+    content: {
+      type: Array,
+      required: true,
+    },
+    useMarkdown: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    getAllUniqueRolesNames() {
+      return this.content
+        .map((item) => item.role)
+        .filter((role, index, self) => self.indexOf(role) === index);
+    },
+    checkIfAreLessThanTwoRoles() {
+      return this.getAllUniqueRolesNames.length <= 2;
+    },
+    colorForRole() {
+      return [
+        "var(--fg-chat-1)",
+        "var(--fg-chat-2)",
+        "var(--fg-chat-3)",
+        "var(--fg-chat-4)",
+        "var(--fg-chat-5)",
+      ];
+    },
+  },
+  methods: {
+    getColorForRole(role) {
+      return this.colorForRole[this.getAllUniqueRolesNames.indexOf(role)];
+    },
+  },
+  setup(props) {
+    return useChatFieldViewModel(props);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chat {
+  $this: &;
+  margin-bottom: $base-space * 3;
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $base-space + calc($base-space / 2);
+    padding: 0 $base-space * 2;
+  }
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: calc($base-space / 2);
+    &--right {
+      align-items: flex-end;
+      align-self: flex-end;
+      #{$this}__bubble {
+        background: var(--bg-bubble-inverse);
+        border-top-right-radius: 3px;
+      }
+    }
+
+    &--left {
+      align-items: flex-start;
+      align-self: flex-start;
+      #{$this}__bubble {
+        background: var(--bg-bubble);
+        border-top-left-radius: 3px;
+      }
+    }
+  }
+
+  &__bubble {
+    max-width: 80%;
+    padding: 2 * $base-space;
+    border-radius: $border-radius-l;
+    border-style: solid;
+    border-width: 1px;
+    @include font-size(16px);
+    @include line-height(24px);
+    white-space: pre-wrap;
+    word-break: break-word;
+    &:has(p) {
+      padding: 2 * $base-space 2 * $base-space $base-space 2 * $base-space;
+    }
+    .--simple & {
+      border-color: var(--border-field) !important;
+    }
+    .--multiple & {
+      max-width: 100%;
+    }
+  }
+
+  &__role {
+    font-weight: 500;
+    @include font-size(13px);
+  }
+
+  &__title {
+    display: inline-block;
+    word-break: break-word;
+    width: calc(100% - 30px);
+    margin-bottom: $base-space * 2;
+    color: var(--fg-secondary);
+  }
+}
+</style>

argilla-frontend/components/features/annotation/container/fields/chat-field/useChatFieldViewModel.ts

@@ -0,0 +1,20 @@
+import { onMounted, watch } from "vue-demi";
+import { useSearchTextHighlight } from "../useSearchTextHighlight";
+
+export const useChatFieldViewModel = (props: {
+  name: string;
+  searchText: string;
+}) => {
+  const { highlightText } = useSearchTextHighlight(props.name);
+
+  watch(
+    () => props.searchText,
+    (newValue) => {
+      highlightText(newValue);
+    }
+  );
+
+  onMounted(() => {
+    highlightText(props.searchText);
+  });
+};

argilla-frontend/components/features/annotation/container/fields/image-field/ImageField.vue

@@ -61,7 +61,7 @@ export default {
   padding: 2 * $base-space;
   background: var(--bg-field);
   border-radius: $border-radius-m;
-  border: 1px solid var(--bg-opacity-2);
+  border: 1px solid var(--border-field);
 
   &_placeholder {
     display: flex;
@@ -87,6 +87,7 @@ export default {
   &_title {
     word-break: break-word;
     width: calc(100% - 30px);
+    color: var(--fg-secondary);
   }
 }
 ::-webkit-scrollbar {