arthur/artagents
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artagents.git synced 2026-02-01 12:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement chat header component and enhance chat file management functionality

Browse Source
This commit is contained in:
Arthur Danjou
2025-04-14 12:47:45 +02:00
parent 0db5831116
commit 6026e39bc5
3 changed files with 143 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
app/components/chat/Header.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div v-if="currentAgent" class="flex justify-between w-full items-center">
<UButton
icon="i-heroicons-chevron-left"
color="primary"
variant="ghost"
class="rounded-full"
@click="$router.push({ path: '/' })"
/>
<div class="flex flex-col items-center justify-center mb-4">
<div class="flex items-center justify-center bg-neutral-300 dark:bg-neutral-800 rounded-full p-2">
<UIcon
:name="currentAgent.icon"
size="32"
/>
</div>
<p class="text-2xl">
{{ currentAgent.name }}
</p>
</div>
<UPopover
:content="{
align: 'end',
side: 'bottom',
}"
>
<UButton
icon="i-heroicons-ellipsis-horizontal"
color="primary"
variant="ghost"
class="rounded-full"
/>
<template #content>
<div class="p-2 space-y-2 max-w-94 min-w-48">
<div class="flex items-start gap-2">
<p class="text-sm font-bold">
Name
</p>
<p class="text-sm text-neutral-600 dark:text-neutral-400">
{{ currentAgent.name }}
</p>
</div>
<div class="flex items-start gap-2">
<p class="text-sm font-bold">
Description
</p>
<p class="text-sm text-neutral-600 dark:text-neutral-400">
{{ currentAgent.description }}
</p>
</div>
<div class="flex items-start gap-2">
<p class="text-sm font-bold">
Model
</p>
<p class="text-sm text-neutral-600 dark:text-neutral-400">
{{ currentAgent.defaultModel }}
</p>
</div>
<div class="flex items-start gap-4">
<p class="text-sm font-bold">
Prompt
</p>
<p class="text-sm text-neutral-600 dark:text-neutral-400 text-justify">
{{ currentAgent.prompt }}
</p>
</div>
</div>
</template>
</UPopover>
</div>
</template>
<script lang="ts" setup>
import type { Agent } from '~~/types';
defineProps<{
currentAgent: Agent
}>()
</script>