WIP Added AI chat component

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'