Merge branch 'develop' into feat/v5-ui-redesign

app/javascript/dashboard/components-next/CardLayout.vue

@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
+    class="flex flex-col w-full outline-1 outline outline-n-container group/cardLayout rounded-xl bg-n-solid-2"
   >
     <div
       class="flex w-full gap-2 py-4"

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -17,6 +17,10 @@ const { attachment } = defineProps({
     type: Object,
     required: true,
   },
+  showTranscribedText: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 defineOptions({
@@ -182,7 +186,7 @@ const downloadAudio = async () => {
     </div>
 
     <div
-      v-if="attachment.transcribedText"
+      v-if="attachment.transcribedText && showTranscribedText"
       class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
     >
       {{ attachment.transcribedText }}

app/javascript/dashboard/components-next/tabbar/TabBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, onMounted, nextTick } from 'vue';
+import { computed, ref, onMounted, nextTick, watch } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 
 const props = defineProps({
@@ -31,20 +31,24 @@ const enableTransition = ref(false);
 const activeElement = computed(() => tabRefs.value[activeTab.value]);
 
 const updateIndicator = () => {
-  if (!activeElement.value) return;
+  nextTick(() => {
+    if (!activeElement.value) return;
 
-  indicatorStyle.value = {
-    left: `${activeElement.value.offsetLeft}px`,
-    width: `${activeElement.value.offsetWidth}px`,
-  };
+    indicatorStyle.value = {
+      left: `${activeElement.value.offsetLeft}px`,
+      width: `${activeElement.value.offsetWidth}px`,
+    };
+  });
 };
 
-useResizeObserver(activeElement, () => {
-  if (enableTransition.value || !activeElement.value) updateIndicator();
+useResizeObserver(activeElement, updateIndicator);
+
+// Watch for prop/tabs changes to update indicator position
+watch([() => props.initialActiveTab, () => props.tabs], updateIndicator, {
+  immediate: true,
 });
 
 onMounted(() => {
-  updateIndicator();
   nextTick(() => {
     enableTransition.value = true;
   });
@@ -66,7 +70,7 @@ const showDivider = index => {
 
 <template>
   <div
-    class="relative flex items-center h-8 rounded-lg bg-n-alpha-1 w-fit transition-all duration-200 ease-out has-[button:active]:scale-[1.01]"
+    class="relative flex items-center h-8 rounded-lg bg-n-alpha-1 dark:bg-n-solid-1 w-fit transition-all duration-200 ease-out has-[button:active]:scale-[1.01]"
   >
     <div
       class="absolute rounded-lg bg-n-solid-active shadow-sm pointer-events-none h-8 outline-1 outline outline-n-container inset-y-0"