chore: Update messages section

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -184,7 +184,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="border rounded-xl shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-10 bg-n-alpha-3 backdrop-blur-[100px] absolute block left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem] [&_ul>li]:mb-0"
+      class="border rounded-xl shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-10 bg-n-alpha-3 backdrop-blur-[100px] absolute block top-full mt-0.5 start-0 sm:start-auto sm:end-0 xl:start-0 max-w-[12.5rem] min-w-[9.75rem] [&_ul>li]:mb-0"
     >
       <Button
         v-if="!isPending"

app/javascript/dashboard/components/widgets/AIAssistanceButton.vue

@@ -133,7 +133,7 @@ export default {
       <NextButton
         v-else
         v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
-        icon="i-ph-magic-wand"
+        icon="i-lucide-wand-sparkles"
         slate
         ghost
         sm

app/javascript/dashboard/components/widgets/VideoCallButton.vue

@@ -52,7 +52,7 @@ export default {
     v-tooltip.top-end="
       $t('INTEGRATION_SETTINGS.DYTE.START_VIDEO_CALL_HELP_TEXT')
     "
-    icon="i-ph-video-camera"
+    icon="i-lucide-video"
     slate
     ghost
     sm

app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue

@@ -68,7 +68,7 @@ const translateValue = computed(() => {
   >
     <div
       ref="wootEditorReplyMode"
-      class="flex items-center gap-1 px-3 z-20"
+      class="flex items-center gap-1 px-3 z-20 text-button"
       :class="{
         'text-n-slate-12': !isPrivate,
         'text-n-slate-10': isPrivate,
@@ -78,7 +78,7 @@ const translateValue = computed(() => {
     </div>
     <div
       ref="wootEditorPrivateMode"
-      class="flex items-center gap-1 px-3 z-20"
+      class="flex items-center gap-1 px-3 z-20 text-button"
       :class="{
         'text-n-amber-text': isPrivate,
         'text-n-slate-10': !isPrivate,

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -15,6 +15,7 @@ import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   isNote: {
@@ -217,13 +218,13 @@ const audioRecorderPlayStopIcon = computed(() => {
   switch (props.recordingAudioState) {
     // playing paused recording stopped inactive destroyed
     case 'playing':
-      return 'i-ph-pause';
+      return 'i-lucide-pause';
     case 'paused':
-      return 'i-ph-play';
+      return 'i-lucide-play';
     case 'stopped':
-      return 'i-ph-play';
+      return 'i-lucide-play';
     default:
-      return 'i-ph-stop';
+      return 'i-lucide-circle-stop';
   }
 });
 
@@ -280,7 +281,7 @@ onMounted(() => {
     <div class="items-center flex gap-1.5">
       <NextButton
         v-tooltip.top-end="t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        icon="i-ph-smiley-sticker"
+        icon="i-lucide-smile-plus"
         slate
         ghost
         sm
@@ -308,7 +309,7 @@ onMounted(() => {
         <NextButton
           v-if="showAttachButton"
           v-tooltip.top-end="t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-          icon="i-ph-paperclip"
+          icon="i-lucide-paperclip"
           slate
           ghost
           sm
@@ -321,7 +322,7 @@ onMounted(() => {
       <NextButton
         v-if="showAudioRecorderButton"
         v-tooltip.top-end="t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
-        :icon="!isRecordingAudio ? 'i-ph-microphone' : 'i-ph-microphone-slash'"
+        :icon="!isRecordingAudio ? 'i-lucide-mic' : 'i-lucide-mic-off'"
         slate
         ghost
         sm
@@ -347,7 +348,7 @@ onMounted(() => {
       <NextButton
         v-if="showMessageSignatureButton"
         v-tooltip.top-end="signatureToggleTooltip"
-        icon="i-ph-signature"
+        icon="i-lucide-signature"
         slate
         ghost
         sm
@@ -360,7 +361,7 @@ onMounted(() => {
       <NextButton
         v-if="showQuotedReplyToggle"
         v-tooltip.top-end="quotedReplyToggleTooltip"
-        icon="i-ph-quotes"
+        icon="i-lucide-quote"
         :variant="quotedReplyEnabled ? 'faded' : 'ghost'"
         color="slate"
         sm
@@ -415,9 +416,9 @@ onMounted(() => {
       <transition name="modal-fade">
         <div
           v-show="uploadRef && uploadRef.dropActive"
-          class="flex fixed top-0 right-0 bottom-0 left-0 z-20 flex-col gap-2 justify-center items-center w-full h-full text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+          class="flex fixed top-0 right-0 bottom-0 left-0 z-50 flex-col gap-2 justify-center items-center w-full h-full text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
         >
-          <fluent-icon icon="cloud-backup" size="40" />
+          <Icon icon="i-lucide-cloud-upload" class="size-10" />
           <h4 class="text-2xl break-words text-n-slate-12">
             {{ t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
@@ -430,7 +431,7 @@ onMounted(() => {
       <NextButton
         v-if="enableInsertArticleInReply"
         v-tooltip.top-end="t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
-        icon="i-ph-article-ny-times"
+        icon="i-lucide-text-initial"
         slate
         ghost
         sm

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -134,7 +134,7 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
       <BackButton v-if="showBackButton" :back-url="backButtonUrl" />
 
       <div class="flex items-center gap-1 min-w-0 ltr:mr-2 rtl:ml-2">
-        <span class="text-base font-medium text-n-slate-12 truncate min-w-0">
+        <span class="text-heading-1 text-n-slate-12 truncate min-w-0">
           {{ currentContact.name }}
         </span>
         <Icon
@@ -167,7 +167,7 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
           icon="i-lucide-bell-off"
           class="text-n-slate-11 size-3.5 shrink-0"
         />
-        <span class="text-xs text-n-slate-11 font-420 truncate min-w-0">
+        <span class="text-n-slate-11 text-label-small truncate min-w-0">
           {{ snoozedDisplayText }}
         </span>
       </div>