neogenia/neo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP - UI fixes for bottom bar

Browse Source
This commit is contained in:
Francisco Gaona
2026-01-08 21:19:48 +01:00
parent 7ae36411db
commit 8b9fa81594
2 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/AIChatBar.vue
View File

@@ -50,6 +50,6 @@ const handleSend = () => {
<style scoped>
.ai-chat-area {
min-height: 120px;
min-height: 190px;
}
</style>

61
frontend/components/BottomDrawer.vue
View File

@@ -190,29 +190,34 @@ onBeforeUnmount(() => {
</script>
<template>
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-30 flex justify-center px-4">
<div class="pointer-events-none fixed inset-x-0 bottom-0 z-30 flex justify-center px-2">
<div
class="pointer-events-auto w-full max-w-5xl border border-border bg-background shadow-xl transition-all duration-200"
class="pointer-events-auto w-full border border-border bg-background shadow-xl transition-all duration-200"
:style="{ height: `${isDrawerOpen ? drawerHeight : collapsedHeight}px` }"
>
<div class="flex items-center justify-between border-border px-4 py-2">
<div class="grid grid-cols-3 items-center justify-between border-border px-2 py-2">
<Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
<TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
<TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
<Phone class="h-4 w-4" />
Softphone
<span
class="inline-flex h-2 w-2 rounded-full"
:class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
/>
</TabsTrigger>
<TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
<Sparkles class="h-4 w-4" />
AI Agent
</TabsTrigger>
</TabsList>
</Tabs>
<div class="flex">
<Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
<TabsList class="mx-2 mt-2 grid w-fit grid-cols-2">
<TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
<Phone class="h-4 w-4" />
Softphone
<span
class="inline-flex h-2 w-2 rounded-full"
:class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
/>
</TabsTrigger>
<TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
<Sparkles class="h-4 w-4" />
AI Agent
</TabsTrigger>
</TabsList>
</Tabs>
</div>
<div
class="flex h-6 flex-1 cursor-row-resize items-center justify-center"
@@ -221,11 +226,15 @@ onBeforeUnmount(() => {
>
<span class="h-1.5 w-12 rounded-full bg-muted" />
</div>
<Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
<X v-if="isDrawerOpen" class="h-4 w-4" />
<ChevronUp v-else class="h-4 w-4" />
<span class="sr-only">{{ isDrawerOpen ? 'Minimize drawer' : 'Expand drawer' }}</span>
</Button>
<div class="flex col-start-3 justify-end">
<Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
<X v-if="isDrawerOpen" class="h-4 w-4" />
<ChevronUp v-else class="h-4 w-4" />
<span class="sr-only">{{ isDrawerOpen ? 'Minimize drawer' : 'Expand drawer' }}</span>
</Button>
</div>
</div>
<Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t">
@@ -422,8 +431,8 @@ onBeforeUnmount(() => {
</div>
</TabsContent>
<TabsContent value="ai" class="h-full">
<div class="flex h-full flex-col justify-end">
<TabsContent value="ai" class="h-full relative">
<div class="flex flex-col justify-end absolute bottom-0 w-full">
<AIChatBar />
</div>
</TabsContent>