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> <style scoped>
.ai-chat-area { .ai-chat-area {
min-height: 120px; min-height: 190px;
} }
</style> </style>

61
frontend/components/BottomDrawer.vue
View File

@@ -190,29 +190,34 @@ onBeforeUnmount(() => {
</script> </script>
<template> <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 <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` }" :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"> <div class="flex">
<TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
<TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')"> <Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
<Phone class="h-4 w-4" /> <TabsList class="mx-2 mt-2 grid w-fit grid-cols-2">
Softphone <TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
<span <Phone class="h-4 w-4" />
class="inline-flex h-2 w-2 rounded-full" Softphone
:class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'" <span
/> class="inline-flex h-2 w-2 rounded-full"
</TabsTrigger> :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
<TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')"> />
<Sparkles class="h-4 w-4" /> </TabsTrigger>
AI Agent <TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
</TabsTrigger> <Sparkles class="h-4 w-4" />
</TabsList> AI Agent
</Tabs> </TabsTrigger>
</TabsList>
</Tabs>
</div>
<div <div
class="flex h-6 flex-1 cursor-row-resize items-center justify-center" 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" /> <span class="h-1.5 w-12 rounded-full bg-muted" />
</div> </div>
<Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
<X v-if="isDrawerOpen" class="h-4 w-4" /> <div class="flex col-start-3 justify-end">
<ChevronUp v-else class="h-4 w-4" /> <Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
<span class="sr-only">{{ isDrawerOpen ? 'Minimize drawer' : 'Expand drawer' }}</span> <X v-if="isDrawerOpen" class="h-4 w-4" />
</Button> <ChevronUp v-else class="h-4 w-4" />
<span class="sr-only">{{ isDrawerOpen ? 'Minimize drawer' : 'Expand drawer' }}</span>
</Button>
</div>
</div> </div>
<Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t"> <Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t">
@@ -422,8 +431,8 @@ onBeforeUnmount(() => {
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="ai" class="h-full"> <TabsContent value="ai" class="h-full relative">
<div class="flex h-full flex-col justify-end"> <div class="flex flex-col justify-end absolute bottom-0 w-full">
<AIChatBar /> <AIChatBar />
</div> </div>
</TabsContent> </TabsContent>