From bef34eeaa5f16b536bfe98666f6f167cfa2dd336 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 7 Feb 2026 16:57:05 +0700
Subject: [PATCH] Move AI button to logo and add left chat sidebar

---
 app/components/ai/AiChatSidebar.vue          | 159 +++++++++++++++++++
 app/components/navigation/MainNavigation.vue |  29 ++--
 app/layouts/topnav.vue                       |  32 +++-
 3 files changed, 202 insertions(+), 18 deletions(-)
 create mode 100644 app/components/ai/AiChatSidebar.vue

diff --git a/app/components/ai/AiChatSidebar.vue b/app/components/ai/AiChatSidebar.vue
new file mode 100644
index 0000000..925e13f
--- /dev/null
+++ b/app/components/ai/AiChatSidebar.vue
@@ -0,0 +1,159 @@
+<template>
+  <aside
+    class="fixed top-0 left-0 bottom-0 z-50 overflow-hidden transition-[width] duration-300"
+    :style="{ width: open ? width : '0px' }"
+    aria-label="AI assistant"
+  >
+    <div
+      class="h-full flex flex-col bg-base-100/80 backdrop-blur-xl border-r border-white/10 shadow-xl transition-opacity duration-200"
+      :class="open ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+    >
+      <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+            <Icon name="lucide:bot" size="16" class="text-primary" />
+          </div>
+          <div class="font-semibold text-base-content">{{ $t('aiAssistants.view.agentName') }}</div>
+        </div>
+        <button
+          class="btn btn-ghost btn-xs btn-circle text-base-content/60 hover:text-base-content"
+          aria-label="Close"
+          @click="emit('close')"
+        >
+          <Icon name="lucide:x" size="14" />
+        </button>
+      </div>
+
+      <div ref="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-3">
+        <div
+          v-for="(message, idx) in chat"
+          :key="idx"
+          class="flex"
+          :class="message.role === 'user' ? 'justify-end' : 'justify-start'"
+        >
+          <div
+            class="max-w-[90%] rounded-2xl px-3 py-2 shadow-sm"
+            :class="message.role === 'user' ? 'bg-primary text-primary-content' : 'bg-base-100 text-base-content border border-base-300'"
+          >
+            <Text weight="semibold" class="mb-1">
+              {{ message.role === 'user' ? $t('aiAssistants.view.you') : $t('aiAssistants.view.agentName') }}
+            </Text>
+            <Text :tone="message.role === 'user' ? undefined : 'muted'">
+              {{ message.content }}
+            </Text>
+          </div>
+        </div>
+        <div v-if="isStreaming" class="text-sm text-base-content/60">
+          {{ $t('aiAssistants.view.typing') }}
+        </div>
+      </div>
+
+      <div class="border-t border-base-300 bg-base-100/70 p-3">
+        <form class="flex items-end gap-2" @submit.prevent="handleSend">
+          <div class="flex-1">
+            <Textarea
+              v-model="input"
+              :placeholder="$t('aiAssistants.view.placeholder')"
+              rows="2"
+              class="w-full"
+            />
+          </div>
+          <div class="flex flex-col gap-2">
+            <Button type="submit" size="sm" :loading="isSending" :disabled="!input.trim()">
+              {{ $t('aiAssistants.view.send') }}
+            </Button>
+            <Button type="button" size="sm" variant="ghost" @click="resetChat" :disabled="isSending">
+              {{ $t('aiAssistants.view.reset') }}
+            </Button>
+          </div>
+        </form>
+        <div class="text-xs text-error text-center mt-2" v-if="error">
+          {{ error }}
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean
+  width: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { t } = useI18n()
+const runtimeConfig = useRuntimeConfig()
+
+const agentUrl = computed(() => runtimeConfig.public.langAgentUrl || '')
+const chatContainer = ref<HTMLElement | null>(null)
+const chat = ref<{ role: 'user' | 'assistant', content: string }[]>([
+  { role: 'assistant', content: t('aiAssistants.view.welcome') }
+])
+const input = ref('')
+const isSending = ref(false)
+const isStreaming = ref(false)
+const error = ref('')
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (chatContainer.value) {
+      chatContainer.value.scrollTop = chatContainer.value.scrollHeight
+    }
+  })
+}
+
+const handleSend = async () => {
+  if (!input.value.trim()) return
+  error.value = ''
+  const userMessage = input.value.trim()
+  chat.value.push({ role: 'user', content: userMessage })
+  input.value = ''
+  isSending.value = true
+  isStreaming.value = true
+  scrollToBottom()
+
+  try {
+    const body = {
+      input: {
+        messages: chat.value.map((m) => ({
+          type: m.role === 'assistant' ? 'ai' : 'human',
+          content: m.content
+        }))
+      }
+    }
+
+    const response = await $fetch(`${agentUrl.value}/invoke`, {
+      method: 'POST',
+      body
+    })
+
+    const outputMessages = (response as any)?.output?.messages || []
+    const last = outputMessages[outputMessages.length - 1]
+    const content = last?.content?.[0]?.text || last?.content || t('aiAssistants.view.emptyResponse')
+    chat.value.push({ role: 'assistant', content })
+    scrollToBottom()
+  } catch (e: unknown) {
+    console.error('Agent error', e)
+    error.value = e instanceof Error ? e.message : t('aiAssistants.view.error')
+    chat.value.push({ role: 'assistant', content: t('aiAssistants.view.error') })
+    scrollToBottom()
+  } finally {
+    isSending.value = false
+    isStreaming.value = false
+  }
+}
+
+const resetChat = () => {
+  chat.value = [{ role: 'assistant', content: t('aiAssistants.view.welcome') }]
+  input.value = ''
+  error.value = ''
+}
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen) scrollToBottom()
+})
+</script>
diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 2475a7f..270bed9 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -11,12 +11,24 @@
       :class="isHeroLayout ? 'items-start pt-4' : 'items-center'"
       :style="rowStyle"
     >
-      <!-- Left: Logo + Nav links (top aligned) -->
+      <!-- Left: Logo + AI button + Nav links (top aligned) -->
       <div class="flex items-center flex-shrink-0 rounded-full glass-bright">
         <div class="flex items-center gap-2 px-4 py-2">
           <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
             <span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
           </NuxtLink>
+          <button
+            class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
+            :class="[
+              useWhiteText
+                ? (chatOpen ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10')
+                : (chatOpen ? 'bg-base-300 text-base-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')
+            ]"
+            aria-label="Toggle AI assistant"
+            @click="$emit('toggle-chat')"
+          >
+            <Icon name="lucide:bot" size="18" />
+          </button>
         </div>
 
         <!-- Service nav links -->
@@ -226,18 +238,9 @@
         </template>
       </div>
 
-      <!-- Right: AI + Globe + Team + User (top aligned like logo) -->
+      <!-- Right: Globe + Team + User (top aligned like logo) -->
       <div class="flex items-center flex-shrink-0 rounded-full glass-bright">
         <div class="flex items-center px-2 py-2">
-          <!-- AI Assistant button -->
-          <NuxtLink
-            :to="localePath('/clientarea/ai')"
-            class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
-            :class="useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
-          >
-            <Icon name="lucide:bot" size="18" />
-          </NuxtLink>
-        </div>
 
         <div class="w-px h-6 bg-white/20 self-center" />
         <div class="flex items-center px-2 py-2">
@@ -413,6 +416,8 @@ const props = withDefaults(defineProps<{
   isHomePage?: boolean
   // Client area flag - shows cabinet tabs instead of search
   isClientArea?: boolean
+  // AI chat sidebar state
+  chatOpen?: boolean
   // Dynamic height for hero effect
   height?: number
   // Collapse progress for hero layout
@@ -423,6 +428,7 @@ const props = withDefaults(defineProps<{
 })
 
 defineEmits([
+  'toggle-chat',
   'toggle-theme',
   'sign-out',
   'sign-in',
@@ -445,6 +451,7 @@ const route = useRoute()
 const { locale, locales } = useI18n()
 const switchLocalePath = useSwitchLocalePath()
 const { t } = useI18n()
+const { chatOpen } = toRefs(props)
 
 // Check if client area tab is active
 const isClientAreaTabActive = (path: string) => {
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 2474009..435d656 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="min-h-screen flex flex-col bg-base-300">
-    <!-- Fixed Header Container -->
-    <div class="fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
+    <AiChatSidebar
+      :open="isChatOpen"
+      :width="chatWidth"
+      @close="isChatOpen = false"
+    />
+
+    <div class="flex-1 flex flex-col" :style="contentStyle">
+      <!-- Fixed Header Container -->
+      <div class="fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
       <!-- Animated background for home page -->
       <HeroBackground v-if="isHomePage" :collapse-progress="collapseProgress" />
 
@@ -34,7 +41,9 @@
         :is-collapsed="isHomePage ? heroIsCollapsed : (isCatalogSection || isClientArea)"
         :is-home-page="isHomePage"
         :is-client-area="isClientArea"
+        :chat-open="isChatOpen"
         @toggle-theme="toggleTheme"
+        @toggle-chat="isChatOpen = !isChatOpen"
         @set-catalog-mode="setCatalogMode"
         @sign-out="onClickSignOut"
         @sign-in="signIn()"
@@ -64,12 +73,13 @@
         v-if="!isHomePage && !isCatalogSection && !isClientArea"
         :section="currentSection"
       />
-    </div>
+      </div>
 
-    <!-- Page content - padding-top compensates for fixed header -->
-    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6" :style="mainStyle">
-      <slot />
-    </main>
+      <!-- Page content - padding-top compensates for fixed header -->
+      <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6" :style="mainStyle">
+        <slot />
+      </main>
+    </div>
   </div>
 </template>
 
@@ -83,6 +93,14 @@ const localePath = useLocalePath()
 const { locale, locales } = useI18n()
 const switchLocalePath = useSwitchLocalePath()
 
+const isChatOpen = useState('ai-chat-open', () => false)
+const chatWidth = computed(() => (isChatOpen.value ? 'clamp(240px, 15vw, 360px)' : '0px'))
+const contentStyle = computed(() => ({
+  transform: isChatOpen.value ? `translateX(${chatWidth.value})` : 'translateX(0)',
+  width: isChatOpen.value ? `calc(100% - ${chatWidth.value})` : '100%',
+  transition: 'transform 250ms ease, width 250ms ease'
+}))
+
 // Catalog search state
 const {
   selectMode,