From 3b08978c0325f170759f1a64027abe3879cfe643 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <PopDaph@users.noreply.github.com>
Date: Tue, 3 Oct 2023 15:31:48 +0200
Subject: [PATCH] UI reactji (#1918)

* WIP UI reactji

* Dynamic load emoji data

* use latest nextjs

* feedback rename function

* Add labels to button for tooltip

* Edit emoji button

* remove preview and force theme light
---
 .../assistant/conversation/AgentMessage.tsx   |  19 +-
 .../assistant/conversation/Conversation.tsx   |  18 +-
 .../conversation/ConversationMessage.tsx      | 221 ++++++++++++++++--
 .../assistant/conversation/UserMessage.tsx    |  13 +-
 front/package-lock.json                       | 167 ++++++-------
 front/package.json                            |   6 +-
 6 files changed, 341 insertions(+), 103 deletions(-)

diff --git a/front/components/assistant/conversation/AgentMessage.tsx b/front/components/assistant/conversation/AgentMessage.tsx
index c26bf96226ec..8060232e677c 100644
--- a/front/components/assistant/conversation/AgentMessage.tsx
+++ b/front/components/assistant/conversation/AgentMessage.tsx
@@ -26,17 +26,24 @@ import {
   isRetrievalActionType,
   RetrievalDocumentType,
 } from "@app/types/assistant/actions/retrieval";
-import { AgentMessageType } from "@app/types/assistant/conversation";
-import { WorkspaceType } from "@app/types/user";
+import {
+  AgentMessageType,
+  MessageReactionType,
+} from "@app/types/assistant/conversation";
+import { UserType, WorkspaceType } from "@app/types/user";
 
 export function AgentMessage({
   message,
   owner,
+  user,
   conversationId,
+  reactions,
 }: {
   message: AgentMessageType;
   owner: WorkspaceType;
+  user: UserType;
   conversationId: string;
+  reactions: MessageReactionType[];
 }) {
   const [streamedAgentMessage, setStreamedAgentMessage] =
     useState<AgentMessageType>(message);
@@ -163,6 +170,7 @@ export function AgentMessage({
       ? []
       : [
           {
+            label: "Copy to clipboard",
             icon: ClipboardIcon,
             onClick: () => {
               void navigator.clipboard.writeText(
@@ -171,6 +179,7 @@ export function AgentMessage({
             },
           },
           {
+            label: "Retry",
             icon: ArrowPathIcon,
             onClick: () => {
               void retryHandler(agentMessageToRender);
@@ -180,11 +189,15 @@ export function AgentMessage({
 
   return (
     <ConversationMessage
+      owner={owner}
+      user={user}
+      conversationId={conversationId}
+      messageId={agentMessageToRender.sId}
       pictureUrl={agentMessageToRender.configuration.pictureUrl}
       name={`@${agentMessageToRender.configuration.name}`}
-      messageId={agentMessageToRender.sId}
       buttons={buttons}
       avatarBusy={agentMessageToRender.status === "created"}
+      reactions={reactions}
     >
       {renderMessage(agentMessageToRender, shouldStream)}
     </ConversationMessage>
diff --git a/front/components/assistant/conversation/Conversation.tsx b/front/components/assistant/conversation/Conversation.tsx
index 0ea13413ebee..0d810cdc0386 100644
--- a/front/components/assistant/conversation/Conversation.tsx
+++ b/front/components/assistant/conversation/Conversation.tsx
@@ -8,7 +8,11 @@ import {
   ConversationTitleEvent,
   UserMessageNewEvent,
 } from "@app/lib/api/assistant/conversation";
-import { useConversation, useConversations } from "@app/lib/swr";
+import {
+  useConversation,
+  useConversationReactions,
+  useConversations,
+} from "@app/lib/swr";
 import {
   AgentMention,
   AgentMessageType,
@@ -43,6 +47,11 @@ export default function Conversation({
     workspaceId: owner.sId,
   });
 
+  const { reactions } = useConversationReactions({
+    workspaceId: owner.sId,
+    conversationId,
+  });
+
   useEffect(() => {
     if (window && window.scrollTo) {
       window.scrollTo(0, document.body.scrollHeight);
@@ -159,6 +168,9 @@ export default function Conversation({
           ) => (cur.version > acc.version ? cur : acc)
         ) as UserMessageType | AgentMessageType;
 
+        const convoReactions = reactions.find((r) => r.messageId === m.sId);
+        const messageReactions = convoReactions?.reactions || [];
+
         if (m.visibility === "deleted") {
           return null;
         }
@@ -174,6 +186,8 @@ export default function Conversation({
                     message={m}
                     conversation={conversation}
                     owner={owner}
+                    user={user}
+                    reactions={messageReactions}
                   />
                 </div>
               </div>
@@ -188,7 +202,9 @@ export default function Conversation({
                   <AgentMessage
                     message={m}
                     owner={owner}
+                    user={user}
                     conversationId={conversationId}
+                    reactions={messageReactions}
                   />
                 </div>
               </div>
diff --git a/front/components/assistant/conversation/ConversationMessage.tsx b/front/components/assistant/conversation/ConversationMessage.tsx
index 45aa8c1cf844..fc707b2ee6b6 100644
--- a/front/components/assistant/conversation/ConversationMessage.tsx
+++ b/front/components/assistant/conversation/ConversationMessage.tsx
@@ -1,28 +1,109 @@
-import { Avatar, IconButton } from "@dust-tt/sparkle";
-import { ComponentType, MouseEventHandler } from "react";
+import {
+  Avatar,
+  Button,
+  DropdownMenu,
+  IconButton,
+  PlusIcon,
+} from "@dust-tt/sparkle";
+import { Emoji, EmojiMartData } from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { ComponentType, MouseEventHandler, useEffect, useState } from "react";
+import React from "react";
+import { mutate } from "swr";
+
+import { classNames } from "@app/lib/utils";
+import { MessageReactionType } from "@app/types/assistant/conversation";
+import { UserType, WorkspaceType } from "@app/types/user";
+
+const MAX_REACTIONS_TO_SHOW = 15;
 
 /**
  * Parent component for both UserMessage and AgentMessage, to ensure avatar,
  * side buttons and spacing are consistent between the two
  */
 export function ConversationMessage({
+  owner,
+  user,
+  conversationId,
   messageId,
   children,
   name,
   pictureUrl,
   buttons,
+  reactions,
   avatarBusy = false,
 }: {
+  owner: WorkspaceType;
+  user: UserType;
+  conversationId: string;
+  messageId: string;
   children?: React.ReactNode;
   name: string | null;
-  messageId: string;
   pictureUrl?: string | null;
   buttons?: {
+    label: string;
     icon: ComponentType;
     onClick: MouseEventHandler<HTMLButtonElement>;
   }[];
+  reactions: MessageReactionType[];
   avatarBusy?: boolean;
 }) {
+  const [emojiData, setEmojiData] = useState<EmojiMartData | null>(null);
+
+  useEffect(() => {
+    async function loadEmojiData() {
+      const mod = await import("@emoji-mart/data");
+      const data: EmojiMartData = mod.default as EmojiMartData;
+      setEmojiData(data);
+    }
+
+    void loadEmojiData();
+  }, []);
+
+  const handleEmoji = async ({
+    emoji,
+    isToRemove,
+  }: {
+    emoji: string;
+    isToRemove: boolean;
+  }) => {
+    const res = await fetch(
+      `/api/w/${owner.sId}/assistant/conversations/${conversationId}/messages/${messageId}/reactions`,
+      {
+        method: isToRemove ? "DELETE" : "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          reaction: emoji,
+        }),
+      }
+    );
+    if (res.ok) {
+      await mutate(
+        `/api/w/${owner.sId}/assistant/conversations/${conversationId}/reactions`
+      );
+    }
+  };
+
+  const handleEmojiClick = async (emojiCode: string) => {
+    const reaction = reactions.find((r) => r.emoji === emojiCode);
+    const hasReacted =
+      (reaction &&
+        reaction.users.find((u) => u.userId === user.id) !== undefined) ||
+      false;
+    await handleEmoji({
+      emoji: emojiCode,
+      isToRemove: hasReacted,
+    });
+  };
+
+  let hasMoreReactions = null;
+  if (reactions.length > MAX_REACTIONS_TO_SHOW) {
+    hasMoreReactions = reactions.length - MAX_REACTIONS_TO_SHOW;
+    reactions = reactions.slice(0, MAX_REACTIONS_TO_SHOW);
+  }
+
   return (
     <div className="flex w-full flex-row gap-4">
       <div className="flex-shrink-0">
@@ -39,21 +120,133 @@ export function ConversationMessage({
           <div className="min-w-0 break-words text-base font-normal">
             {children}
           </div>
+          <div>
+            {reactions.map((reaction) => {
+              const hasReacted =
+                reaction.users.find((u) => u.userId === user.id) !== undefined;
+              const emoji = emojiData?.emojis[reaction.emoji];
+              if (!emoji) {
+                return null;
+              }
+              return (
+                <React.Fragment key={reaction.emoji}>
+                  <a
+                    className="cursor-pointer"
+                    onClick={async () => {
+                      await handleEmoji({
+                        emoji: reaction.emoji,
+                        isToRemove: hasReacted,
+                      });
+                    }}
+                  >
+                    <Reacji
+                      key={reaction.emoji}
+                      count={reaction.users.length}
+                      isHighlighted={hasReacted}
+                      emoji={emoji}
+                    ></Reacji>
+                  </a>
+                </React.Fragment>
+              );
+            })}
+            {hasMoreReactions && (
+              <span className="text-base text-xs">+{hasMoreReactions}</span>
+            )}
+          </div>
         </div>
       </div>
-      <div className="flex flex-col items-start gap-2 sm:flex-row">
-        {buttons &&
-          buttons.map((button, i) => (
-            <div key={`message-${messageId}-button-${i}`}>
-              <IconButton
-                variant="tertiary"
-                size="sm"
-                icon={button.icon}
-                onClick={button.onClick}
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col items-start gap-2 sm:flex-row">
+          {buttons &&
+            buttons.map((button, i) => (
+              <div key={`message-${messageId}-button-${i}`}>
+                <Button
+                  variant="tertiary"
+                  size="xs"
+                  label={button.label}
+                  labelVisible={false}
+                  icon={button.icon}
+                  onClick={button.onClick}
+                />
+              </div>
+            ))}
+        </div>
+
+        <div className="duration-400 active:s-border-action-500 box-border inline-flex scale-100 cursor-pointer items-center gap-x-1 whitespace-nowrap rounded-full border border-structure-200 bg-structure-0 px-2 text-xs text-element-800 ">
+          <a
+            className="cursor-pointer px-1 py-1.5 hover:border-action-200 hover:bg-action-50 hover:drop-shadow-md active:scale-95 active:bg-action-100 active:drop-shadow-none"
+            onClick={async () => await handleEmojiClick("+1")}
+          >
+            👍
+          </a>
+          <a
+            className="cursor-pointer px-1 py-1.5 hover:border-action-200 hover:bg-action-50 hover:drop-shadow-md active:scale-95 active:bg-action-100 active:drop-shadow-none"
+            onClick={async () => await handleEmojiClick("-1")}
+          >
+            👎
+          </a>
+          <a
+            className="cursor-pointer px-1 py-1.5 hover:border-action-200 hover:bg-action-50 hover:drop-shadow-md active:scale-95 active:bg-action-100 active:drop-shadow-none"
+            onClick={async () => await handleEmojiClick("heart")}
+          >
+            ❤️
+          </a>
+          <DropdownMenu>
+            <DropdownMenu.Button>
+              <IconButton variant="tertiary" size="xs" icon={PlusIcon} />
+            </DropdownMenu.Button>
+            <DropdownMenu.Items width={280}>
+              <Picker
+                theme="light"
+                previewPosition="none"
+                data={emojiData}
+                onEmojiSelect={async (emojiData: Emoji) => {
+                  const reaction = reactions.find(
+                    (r) => r.emoji === emojiData.id
+                  );
+                  const hasReacted =
+                    (reaction &&
+                      reaction.users.find((u) => u.userId === user.id) !==
+                        undefined) ||
+                    false;
+                  await handleEmoji({
+                    emoji: emojiData.id,
+                    isToRemove: hasReacted,
+                  });
+                }}
               />
-            </div>
-          ))}
+            </DropdownMenu.Items>
+          </DropdownMenu>
+        </div>
       </div>
     </div>
   );
 }
+
+function Reacji({
+  count,
+  isHighlighted,
+  emoji,
+}: {
+  count: number;
+  isHighlighted: boolean;
+  emoji: Emoji;
+}) {
+  const nativeEmoji = emoji.skins[0].native;
+  if (!nativeEmoji) {
+    return null;
+  }
+  return (
+    <span className="whitespace-nowrap pr-2">
+      {nativeEmoji}&nbsp;
+      <span
+        className={classNames(
+          "text-xs",
+          isHighlighted ? "font-bold text-action-500" : ""
+        )}
+      >
+        {count}
+      </span>
+    </span>
+  );
+}
diff --git a/front/components/assistant/conversation/UserMessage.tsx b/front/components/assistant/conversation/UserMessage.tsx
index 79509daa22f0..4bccd3ce2202 100644
--- a/front/components/assistant/conversation/UserMessage.tsx
+++ b/front/components/assistant/conversation/UserMessage.tsx
@@ -3,9 +3,10 @@ import { RenderMessageMarkdown } from "@app/components/assistant/RenderMessageMa
 import { useAgentConfigurations } from "@app/lib/swr";
 import {
   ConversationType,
+  MessageReactionType,
   UserMessageType,
 } from "@app/types/assistant/conversation";
-import { WorkspaceType } from "@app/types/user";
+import { UserType, WorkspaceType } from "@app/types/user";
 
 import { AgentSuggestion } from "./AgentSuggestion";
 
@@ -13,10 +14,14 @@ export function UserMessage({
   message,
   conversation,
   owner,
+  user,
+  reactions,
 }: {
   message: UserMessageType;
   conversation: ConversationType;
   owner: WorkspaceType;
+  user: UserType;
+  reactions: MessageReactionType[];
 }) {
   const { agentConfigurations } = useAgentConfigurations({
     workspaceId: owner.sId,
@@ -24,9 +29,13 @@ export function UserMessage({
 
   return (
     <ConversationMessage
+      owner={owner}
+      user={user}
+      conversationId={conversation.sId}
+      messageId={message.sId}
       pictureUrl={message.context.profilePictureUrl}
       name={message.context.fullName}
-      messageId={message.sId}
+      reactions={reactions}
     >
       <div className="flex flex-col gap-4">
         <div>
diff --git a/front/package-lock.json b/front/package-lock.json
index 1e619d43faf9..96efb89b2587 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -6,6 +6,8 @@
     "": {
       "dependencies": {
         "@dust-tt/sparkle": "0.1.96",
+        "@emoji-mart/data": "^1.1.2",
+        "@emoji-mart/react": "^1.1.1",
         "@headlessui/react": "^1.7.7",
         "@heroicons/react": "^2.0.11",
         "@nangohq/frontend": "^0.16.1",
@@ -18,10 +20,12 @@
         "@temporalio/worker": "^1.7.4",
         "@temporalio/workflow": "^1.7.4",
         "@textea/json-viewer": "^3.1.1",
+        "@types/emoji-mart": "^3.0.10",
         "@uiw/react-textarea-code-editor": "^2.1.7",
         "ajv": "^8.12.0",
         "blake3": "^2.1.7",
         "dd-trace": "^3.16.0",
+        "emoji-mart": "^5.5.2",
         "eventsource-parser": "^1.0.0",
         "fast-diff": "^1.3.0",
         "formidable": "^3.5.1",
@@ -33,7 +37,7 @@
         "jsonwebtoken": "^9.0.0",
         "minimist": "^1.2.8",
         "moment-timezone": "^0.5.43",
-        "next": "^13.1.5",
+        "next": "^13.5.4",
         "next-auth": "^4.18.10",
         "next-remove-imports": "^1.0.8",
         "pdfjs-dist": "^3.7.107",
@@ -732,6 +736,20 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/@emoji-mart/data": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz",
+      "integrity": "sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg=="
+    },
+    "node_modules/@emoji-mart/react": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
+      "integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==",
+      "peerDependencies": {
+        "emoji-mart": "^5.2",
+        "react": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -1837,8 +1855,9 @@
       "license": "SEE LICENSE IN LICENSE FILE IN GIT REPOSITORY"
     },
     "node_modules/@next/env": {
-      "version": "13.4.10",
-      "license": "MIT"
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.4.tgz",
+      "integrity": "sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "13.4.10",
@@ -1849,9 +1868,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.10.tgz",
-      "integrity": "sha512-4bsdfKmmg7mgFGph0UorD1xWfZ5jZEw4kKRHYEeTK9bT1QnMbPVPlVXQRIiFPrhoDQnZUoa6duuPUJIEGLV1Jg==",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.4.tgz",
+      "integrity": "sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==",
       "cpu": [
         "arm64"
       ],
@@ -1864,9 +1883,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.10.tgz",
-      "integrity": "sha512-ngXhUBbcZIWZWqNbQSNxQrB9T1V+wgfCzAor2olYuo/YpaL6mUYNUEgeBMhr8qwV0ARSgKaOp35lRvB7EmCRBg==",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.4.tgz",
+      "integrity": "sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==",
       "cpu": [
         "x64"
       ],
@@ -1879,9 +1898,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.10.tgz",
-      "integrity": "sha512-SjCZZCOmHD4uyM75MVArSAmF5Y+IJSGroPRj2v9/jnBT36SYFTORN8Ag/lhw81W9EeexKY/CUg2e9mdebZOwsg==",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.4.tgz",
+      "integrity": "sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==",
       "cpu": [
         "arm64"
       ],
@@ -1894,9 +1913,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.10.tgz",
-      "integrity": "sha512-F+VlcWijX5qteoYIOxNiBbNE8ruaWuRlcYyIRK10CugqI/BIeCDzEDyrHIHY8AWwbkTwe6GRHabMdE688Rqq4Q==",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.4.tgz",
+      "integrity": "sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==",
       "cpu": [
         "arm64"
       ],
@@ -1909,11 +1928,12 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.4.10",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.4.tgz",
+      "integrity": "sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1923,11 +1943,12 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.4.10",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.4.tgz",
+      "integrity": "sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1937,9 +1958,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.10.tgz",
-      "integrity": "sha512-IboRS8IWz5mWfnjAdCekkl8s0B7ijpWeDwK2O8CdgZkoCDY0ZQHBSGiJ2KViAG6+BJVfLvcP+a2fh6cdyBr9QQ==",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.4.tgz",
+      "integrity": "sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==",
       "cpu": [
         "arm64"
       ],
@@ -1952,9 +1973,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.10.tgz",
-      "integrity": "sha512-bSA+4j8jY4EEiwD/M2bol4uVEu1lBlgsGdvM+mmBm/BbqofNBfaZ2qwSbwE2OwbAmzNdVJRFRXQZ0dkjopTRaQ==",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.4.tgz",
+      "integrity": "sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==",
       "cpu": [
         "ia32"
       ],
@@ -1967,9 +1988,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.10.tgz",
-      "integrity": "sha512-g2+tU63yTWmcVQKDGY0MV1PjjqgZtwM4rB1oVVi/v0brdZAcrcTV+04agKzWtvWroyFz6IqtT0MoZJA7PNyLVw==",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz",
+      "integrity": "sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==",
       "cpu": [
         "x64"
       ],
@@ -2379,8 +2400,9 @@
       }
     },
     "node_modules/@swc/helpers": {
-      "version": "0.5.1",
-      "license": "Apache-2.0",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -2572,6 +2594,14 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/emoji-mart": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.10.tgz",
+      "integrity": "sha512-WP5Vw1CLsTQpPT/Hj+shIMC5TB4pyoJourYQe01ceYtJVEopTwuXbCTE6f7aHOKj26E/Y+oZaPtKBtnG1S4d2Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.44.0",
       "license": "MIT",
@@ -4816,6 +4846,11 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
+    "node_modules/emoji-mart": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz",
+      "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A=="
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "dev": true,
@@ -9301,38 +9336,37 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "13.4.10",
-      "license": "MIT",
+      "version": "13.5.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.4.tgz",
+      "integrity": "sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==",
       "dependencies": {
-        "@next/env": "13.4.10",
-        "@swc/helpers": "0.5.1",
+        "@next/env": "13.5.4",
+        "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
-        "postcss": "8.4.14",
+        "postcss": "8.4.31",
         "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0",
-        "zod": "3.21.4"
+        "watchpack": "2.4.0"
       },
       "bin": {
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=16.8.0"
+        "node": ">=16.14.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.4.10",
-        "@next/swc-darwin-x64": "13.4.10",
-        "@next/swc-linux-arm64-gnu": "13.4.10",
-        "@next/swc-linux-arm64-musl": "13.4.10",
-        "@next/swc-linux-x64-gnu": "13.4.10",
-        "@next/swc-linux-x64-musl": "13.4.10",
-        "@next/swc-win32-arm64-msvc": "13.4.10",
-        "@next/swc-win32-ia32-msvc": "13.4.10",
-        "@next/swc-win32-x64-msvc": "13.4.10"
+        "@next/swc-darwin-arm64": "13.5.4",
+        "@next/swc-darwin-x64": "13.5.4",
+        "@next/swc-linux-arm64-gnu": "13.5.4",
+        "@next/swc-linux-arm64-musl": "13.5.4",
+        "@next/swc-linux-x64-gnu": "13.5.4",
+        "@next/swc-linux-x64-musl": "13.5.4",
+        "@next/swc-win32-arm64-msvc": "13.5.4",
+        "@next/swc-win32-ia32-msvc": "13.5.4",
+        "@next/swc-win32-x64-msvc": "13.5.4"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
-        "fibers": ">= 3.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -9341,9 +9375,6 @@
         "@opentelemetry/api": {
           "optional": true
         },
-        "fibers": {
-          "optional": true
-        },
         "sass": {
           "optional": true
         }
@@ -9391,28 +9422,6 @@
         "babel-plugin-transform-remove-imports": "^1.7.0"
       }
     },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.14",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
     "node_modules/node-abort-controller": {
       "version": "3.1.1",
       "license": "MIT"
@@ -10269,7 +10278,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.26",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -10284,7 +10295,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -13350,13 +13360,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/zod": {
-      "version": "3.21.4",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/zustand": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.0.tgz",
diff --git a/front/package.json b/front/package.json
index 2cbf4af8a03a..16f4fcdcd0c1 100644
--- a/front/package.json
+++ b/front/package.json
@@ -14,6 +14,8 @@
   },
   "dependencies": {
     "@dust-tt/sparkle": "0.1.96",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",
     "@nangohq/frontend": "^0.16.1",
@@ -26,10 +28,12 @@
     "@temporalio/worker": "^1.7.4",
     "@temporalio/workflow": "^1.7.4",
     "@textea/json-viewer": "^3.1.1",
+    "@types/emoji-mart": "^3.0.10",
     "@uiw/react-textarea-code-editor": "^2.1.7",
     "ajv": "^8.12.0",
     "blake3": "^2.1.7",
     "dd-trace": "^3.16.0",
+    "emoji-mart": "^5.5.2",
     "eventsource-parser": "^1.0.0",
     "fast-diff": "^1.3.0",
     "formidable": "^3.5.1",
@@ -41,7 +45,7 @@
     "jsonwebtoken": "^9.0.0",
     "minimist": "^1.2.8",
     "moment-timezone": "^0.5.43",
-    "next": "^13.1.5",
+    "next": "^13.5.4",
     "next-auth": "^4.18.10",
     "next-remove-imports": "^1.0.8",
     "pdfjs-dist": "^3.7.107",