WIP - UI fixes for bottom bar

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

View File

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

View File

@@ -190,15 +190,17 @@ 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">
<div class="flex">
<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">
<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
@@ -214,6 +216,9 @@ onBeforeUnmount(() => {
</TabsList>
</Tabs>
</div>
<div
class="flex h-6 flex-1 cursor-row-resize items-center justify-center"
@mousedown="startResize"
@@ -221,6 +226,8 @@ onBeforeUnmount(() => {
>
<span class="h-1.5 w-12 rounded-full bg-muted" />
</div>
<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" />
@@ -228,6 +235,8 @@ onBeforeUnmount(() => {
</Button>
</div>
</div>
<Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t">
<TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
<TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
@@ -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>