WIP Added AI chat component

frontend/components/AIChatBar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import {
+  InputGroup,
+  InputGroupTextarea,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+} from '@/components/ui/input-group'
+import { Separator } from '@/components/ui/separator'
+import { ArrowUp } from 'lucide-vue-next'
+
+const chatInput = ref('')
+
+const handleSend = () => {
+  if (!chatInput.value.trim()) return
+  
+  // TODO: Implement AI chat send functionality
+  console.log('Sending message:', chatInput.value)
+  chatInput.value = ''
+}
+</script>
+
+<template>
+  <div class="ai-chat-area sticky bottom-0 z-20 bg-background border-t border-border p-4 bg-neutral-50">
+    <InputGroup>
+      <InputGroupTextarea 
+        v-model="chatInput"
+        placeholder="Ask, Search or Chat..." 
+        class="min-h-[60px] rounded-lg"
+        @keydown.enter.exact.prevent="handleSend"
+      />
+      <InputGroupAddon>
+        <InputGroupText class="ml-auto">
+          52% used
+        </InputGroupText>
+        <Separator orientation="vertical" class="!h-4" />
+        <InputGroupButton
+          variant="default"
+          class="rounded-full"
+          :disabled="!chatInput.trim()"
+          @click="handleSend"
+        >
+          <ArrowUp class="size-4" />
+          <span class="sr-only">Send</span>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+</template>
+
+<style scoped>
+.ai-chat-area {
+  height: calc(100vh / 6);
+  min-height: 140px;
+  max-height: 200px;
+}
+</style>

frontend/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRoot,
+  type DropdownMenuRootEmits,
+  type DropdownMenuRootProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>

frontend/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { DropdownMenuPortal, DropdownMenuContent, type DropdownMenuContentProps, type DropdownMenuContentEmits, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class
+      )"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

frontend/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

frontend/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+</script>
+
+<template>
+  <DropdownMenuTrigger v-bind="props">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

frontend/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,4 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'

frontend/components/ui/input-group/InputGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('relative flex w-full flex-col gap-2', props.class)">
+    <slot />
+  </div>
+</template>

frontend/components/ui/input-group/InputGroupAddon.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  align?: 'start' | 'end' | 'center' | 'block-end'
+  class?: HTMLAttributes['class']
+}>()
+
+const alignClasses = {
+  start: 'justify-start',
+  end: 'justify-end',
+  center: 'justify-center',
+  'block-end': 'justify-end items-end',
+}
+</script>
+
+<template>
+  <div :class="cn('flex flex-wrap items-center gap-2', alignClasses[props.align || 'start'], props.class)">
+    <slot />
+  </div>
+</template>

frontend/components/ui/input-group/InputGroupButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '../button'
+import { Button } from '../button'
+import type { HTMLAttributes } from 'vue'
+
+interface Props {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Button
+    :variant="props.variant"
+    :size="props.size"
+    :class="props.class"
+    :disabled="props.disabled"
+  >
+    <slot />
+  </Button>
+</template>

frontend/components/ui/input-group/InputGroupText.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

frontend/components/ui/input-group/InputGroupTextarea.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  placeholder?: string
+  class?: HTMLAttributes['class']
+}>()
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <textarea
+    v-model="model"
+    :placeholder="props.placeholder"
+    :class="cn(
+      'flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none',
+      props.class
+    )"
+  />
+</template>

frontend/components/ui/input-group/index.ts

@@ -0,0 +1,5 @@
+export { default as InputGroup } from './InputGroup.vue'
+export { default as InputGroupTextarea } from './InputGroupTextarea.vue'
+export { default as InputGroupAddon } from './InputGroupAddon.vue'
+export { default as InputGroupButton } from './InputGroupButton.vue'
+export { default as InputGroupText } from './InputGroupText.vue'

frontend/layouts/default.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AppSidebar from '@/components/AppSidebar.vue'
+import AIChatBar from '@/components/AIChatBar.vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -26,7 +27,7 @@ const breadcrumbs = computed(() => {
 <template>
   <SidebarProvider>
     <AppSidebar />
-    <SidebarInset>
+    <SidebarInset class="flex flex-col">
       <header
         class="relative z-10 flex h-16 shrink-0 items-center gap-2 bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b shadow-md"
       >
@@ -58,9 +59,14 @@ const breadcrumbs = computed(() => {
           </Breadcrumb>
         </div>
       </header>
-      <div class="layout-slot-container flex flex-1 flex-col gap-4 p-4 pt-0">
+      
+      <!-- Main scrollable content -->
+      <div class="layout-slot-container flex flex-1 flex-col gap-4 p-4 pt-0 overflow-y-auto">
         <slot />
       </div>
+
+      <!-- AI Chat Bar Component -->
+      <AIChatBar />
     </SidebarInset>
   </SidebarProvider>
 </template>
@@ -69,7 +75,6 @@ const breadcrumbs = computed(() => {
 .layout-slot-container {
   position: relative;
   background-color: #ffffff;
-  overflow: hidden;
   background-image: linear-gradient(to bottom, #DFDBE5 0%, rgba(223, 219, 229, 0) 100%);
   background-size: 100% 150px;
   background-repeat: no-repeat;