feat: add dropdown for token details

app/components/Message/Agent/index.vue

@@ -5,9 +5,22 @@ import Text from './Text.vue';
 import Tool from './Tool/index.vue';
 import type { MessageEntity } from '~/composables/useChat';
 
-defineProps<{
+const props = defineProps<{
     message: MessageEntity
 }>();
+
+const triggerRef = ref<HTMLElement | null>(null);
+
+const { open, close, isOpen } = useTokenDropdown();
+
+const toggleTokenDropdown = () => {
+    if (isOpen.value) {
+        close();
+        return;
+    }
+
+    open(props.message.generation!, triggerRef.value!);
+};
 </script>
 
 <template>
@@ -40,7 +53,8 @@ defineProps<{
                 {{ message.generation.modelId }}
             </div>
 
-            <div class="flex gap-2">
+            <button ref="triggerRef" @click="toggleTokenDropdown"
+                class="flex gap-2 hover:bg-[var(--color-hover)] px-1 rounded transition-colors duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                 <span class="flex gap-1 items-center" v-if="message.generation.tokens?.output">
                     <span class="i-tabler-coins"></span>
                     {{ message.generation?.tokens?.output }}
@@ -49,7 +63,7 @@ defineProps<{
                 <span v-if="message.generation.tokens?.tps">
                     {{ message.generation.tokens.tps.toFixed(1) }} tps
                 </span>
-            </div>
+            </button>
         </div>
     </div>
 </template>