Initial commit

resources/js/pages/apps/components/ChatInput.vue

@@ -0,0 +1,192 @@
+<script setup>
+import { ref, nextTick } from 'vue';
+
+const props = defineProps({
+  msg: String,
+  isInputDisabled: Boolean,
+  activeModelColor: String,
+  selectedAttachments: Array,
+  showSuggestions: Boolean,
+  suggestions: Array,
+  selectedSuggestionIndex: Number,
+});
+
+const emit = defineEmits([
+  'update:msg',
+  'send',
+  'compositionstart',
+  'compositionend',
+  'keydown',
+  'remove-attachment',
+  'select-suggestion',
+]);
+
+const inputRef = ref();
+</script>
+
+<template>
+  <div class="input-wrapper">
+    <div
+      class="chat-input-container rounded-3xl pa-3 mb-2"
+      :class="{ 'pt-0': selectedAttachments.length === 0 }"
+    >
+      <div
+        v-if="selectedAttachments.length > 0"
+        class="d-flex flex-wrap gap-2 mt-3 mb-2 attachment-chip-container"
+      >
+        <VChip
+          v-for="(file, index) in selectedAttachments"
+          :key="index"
+          closable
+          @click:close="emit('remove-attachment', index)"
+          color="grey-lighten-3"
+          class="align-center attachment-chip"
+        >
+          <VIcon start :icon="'tabler-file'" size="small"></VIcon>
+          <span class="attachment-name">{{ file.name }}</span>
+          <span class="attachment-size">({{ (file.size / (1024 * 1024)).toFixed(1) }} MB)</span>
+        </VChip>
+      </div>
+
+      <div class="position-relative">
+        <VTextarea
+          ref="inputRef"
+          :model-value="msg"
+          auto-grow
+          rows="1"
+          row-height="20"
+          :disabled="isInputDisabled"
+          hide-details
+          variant="plain"
+          persistent-placeholder
+          density="comfortable"
+          class="chat-textarea"
+          placeholder="Type your message..."
+          no-resize
+          @update:model-value="emit('update:msg', $event)"
+          @keydown="emit('keydown', $event)"
+          @compositionstart="emit('compositionstart')"
+          @compositionend="emit('compositionend')"
+        ></VTextarea>
+
+        <div v-if="showSuggestions" class="suggestions-dropdown rounded pa-2">
+          <div class="suggestions-header text-caption text-grey-darken-1 mb-1 px-2">Suggestions</div>
+          <div
+            v-for="(suggestion, index) in suggestions"
+            :key="index"
+            class="suggestion-item pa-2 rounded d-flex align-center"
+            :class="{ 'suggestion-selected': selectedSuggestionIndex === index }"
+            @click="emit('select-suggestion', suggestion)"
+            @mouseenter="emit('update:selectedSuggestionIndex', index)"
+          >
+            <VIcon icon="tabler-search" size="16" class="me-2 text-grey-darken-1" />
+            <span class="suggestion-text">{{ suggestion }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="d-flex align-center justify-end mt-1">
+        <VBtn
+          icon
+          size="large"
+          :color="activeModelColor"
+          @click="emit('send')"
+          :disabled="isInputDisabled || !msg.trim()"
+        >
+          <VIcon icon="tabler-send" />
+        </VBtn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.attachment-chip-container {
+  overflow-x: auto;
+  padding-bottom: 4px;
+  margin-right: -8px;
+  margin-left: -8px;
+  padding-left: 8px;
+  padding-right: 8px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.attachment-chip-container::-webkit-scrollbar {
+  display: none;
+}
+
+.attachment-chip {
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.attachment-name {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.attachment-size {
+  margin-left: 4px;
+}
+
+.suggestions-dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 16px rgba(var(--v-theme-on-surface), 0.15);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  z-index: 15;
+  margin-bottom: 8px;
+  max-height: 240px;
+  overflow-y: auto;
+  animation: suggestions-fade-in 0.2s ease-out;
+}
+
+.suggestions-header {
+  font-weight: 500;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.suggestion-item {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 2px;
+  border: 1px solid transparent;
+}
+
+.suggestion-item:hover,
+.suggestion-item.suggestion-selected {
+  background: rgba(var(--v-theme-primary), 0.08);
+  border-color: rgba(var(--v-theme-primary), 0.2);
+  transform: translateX(2px);
+}
+
+.suggestion-text {
+  font-size: 0.875rem;
+  color: rgb(var(--v-theme-on-surface));
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@keyframes suggestions-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

resources/js/pages/apps/components/FormQuestion.vue

@@ -0,0 +1,54 @@
+<script setup>
+const props = defineProps({
+  form: Object,
+  activeModelColor: String,
+});
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+  <div class="form-container">
+    <div class="form-title font-weight-bold mb-2">
+      {{ form.title }}
+    </div>
+    <div class="form-question mb-3">
+      {{ form.question }}
+    </div>
+    <div class="form-options d-flex gap-2">
+      <VBtn
+        v-for="(option, optIndex) in form.options"
+        :key="optIndex"
+        :color="activeModelColor"
+        variant="outlined"
+        size="small"
+        class="form-option-btn"
+        @click="emit('select', option)"
+      >
+        {{ option }}
+      </VBtn>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.form-title {
+  font-size: 1.1rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.form-question {
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.form-options .form-option-btn {
+  margin-bottom: 8px;
+  border-radius: 8px;
+  text-transform: none;
+}
+
+.form-options .form-option-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+</style>

resources/js/pages/apps/components/MessageItem.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+import { themes } from '@/plugins/vuetify/theme';
+
+const props = defineProps({
+  message: Object,
+  activeModelColor: String,
+  activeModelBgColor: String,
+  models: Array,
+  selectedModelIdentifier: String,
+});
+
+const getFileIcon = (fileType) => {
+  if (fileType.startsWith('image/')) return 'tabler-photo';
+  if (fileType.includes('pdf')) return 'tabler-file-type-pdf';
+  if (fileType.includes('word')) return 'tabler-file-type-doc';
+  if (fileType.includes('text')) return 'tabler-file-text';
+  return 'tabler-file';
+};
+
+const getFileSize = (size) => {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+};
+</script>
+
+<template>
+  <li
+    class="my-3 d-flex"
+    :class="[
+      message.sender === 'user' ? 'justify-end' : 'justify-start',
+      message.isAnimating ? 'is-animating' : '',
+      message.sender === 'user' ? 'user-message' : 'bot-message',
+      message.isSystemMessage ? 'system-message' : '',
+    ]"
+  >
+    <template v-if="message.sender !== 'user'">
+      <VAvatar
+        size="32"
+        :color="message.isSystemMessage ? 'grey' : activeModelColor"
+        variant="tonal"
+        class="me-2 message-avatar"
+      >
+        <VIcon
+          :icon="message.isSystemMessage ? 'tabler-info-circle' : 'tabler-robot'"
+        />
+      </VAvatar>
+    </template>
+
+    <div
+      class="pa-3 rounded-lg message-bubble"
+      :class="[
+        message.sender === 'user'
+          ? 'bg-primary text-white'
+          : message.isSystemMessage
+          ? 'bg-grey-lighten-3 text-grey-darken-3'
+          : `bg-${activeModelBgColor} text-white`,
+        message.isAnimating ? 'animate-message' : '',
+      ]"
+    >
+      <div v-if="!message.form && !message.multiForm && !message.type">
+        {{ message.text }}
+      </div>
+
+      <div v-if="message.isAttachment && message.files" class="attachment-preview mt-2">
+        <div
+          v-for="(file, fileIndex) in message.files"
+          :key="fileIndex"
+          class="d-flex align-center mb-1"
+        >
+          <VIcon :icon="getFileIcon(file.type)" size="small" class="me-1"></VIcon>
+          <span class="text-caption">{{ file.name }} ({{ getFileSize(file.size) }})</span>
+        </div>
+      </div>
+    </div>
+
+    <template v-if="message.sender === 'user'">
+      <VAvatar size="32" color="grey" variant="tonal" class="ms-2 message-avatar">
+        <VIcon icon="tabler-user" />
+      </VAvatar>
+    </template>
+  </li>
+</template>
+
+<style scoped>
+.message-avatar {
+  opacity: 0;
+  animation: fade-in 0.3s ease forwards;
+  animation-delay: 0.15s;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.attachment-preview {
+  font-size: 0.85rem;
+  opacity: 0.9;
+}
+</style>

resources/js/pages/apps/components/ModelSelector.vue

@@ -0,0 +1,63 @@
+<script setup>
+const props = defineProps({
+  models: Array,
+  selectedModelIdentifier: String,
+  activeModelColor: String,
+  showModelMenu: Boolean,
+});
+const emit = defineEmits(['update:model', 'update:menu']);
+
+const selectedModelName = computed(() => {
+  const model = props.models.find((m) => m.identifier === props.selectedModelIdentifier);
+  return model ? model.name : 'Select Model';
+});
+</script>
+
+<template>
+  <VMenu :model-value="showModelMenu" location="top" @update:model-value="emit('update:menu', $event)">
+    <template v-slot:activator="{ props: menuProps }">
+      <VBtn
+        v-bind="menuProps"
+        :color="activeModelColor"
+        variant="text"
+        class="text-none model-select-btn"
+        density="comfortable"
+      >
+        <span class="d-none d-sm-block">{{ selectedModelName }}</span>
+        <span class="d-block d-sm-none">Model</span>
+        <VIcon icon="tabler-chevron-down" class="ms-1" />
+      </VBtn>
+    </template>
+
+    <VList density="compact" max-height="300">
+      <VListItem
+        v-for="model in models"
+        :key="model.identifier"
+        :value="model.identifier"
+        @click="emit('update:model', model.identifier); emit('update:menu', false)"
+      >
+        <template v-slot:prepend>
+          <div
+            class="model-color-indicator"
+            :style="`background-color: var(--v-theme-${model.color})`"
+          ></div>
+        </template>
+        <VListItemTitle>{{ model.name }}</VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>
+
+<style scoped>
+.model-select-btn {
+  min-width: auto;
+  padding: 0 8px;
+}
+
+.model-color-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+</style>

resources/js/pages/apps/components/MultiStepForm.vue

@@ -0,0 +1,99 @@
+<script setup>
+const props = defineProps({
+  step: Object,
+  stepNumber: Number,
+  totalSteps: Number,
+  activeModelColor: String,
+  activeModelBgColor: String,
+});
+const emit = defineEmits(["cancel", "select"]);
+</script>
+
+<template>
+  <div class="multi-form-container">
+    <div class="multi-form-header mb-3">
+      <div class="d-flex justify-space-between align-center mb-2">
+        <div class="form-title font-weight-bold">
+          {{ step.formTitle }}
+        </div>
+        <div class="d-flex align-center">
+          <VChip :color="activeModelColor" size="small" variant="tonal">
+            {{ stepNumber }}/{{ totalSteps }}
+          </VChip>
+          <VBtn icon size="x-small" @click="emit('cancel')" class="ms-2">
+            <VIcon icon="tabler-x" />
+          </VBtn>
+        </div>
+      </div>
+
+      <VProgressLinear
+        :model-value="(stepNumber / totalSteps) * 100"
+        :color="activeModelColor"
+        height="4"
+        rounded
+        class="mb-3"
+      ></VProgressLinear>
+    </div>
+
+    <div class="step-title font-weight-medium mb-2">
+      {{ step.title }}
+    </div>
+
+    <div class="form-question mb-3">
+      {{ step.question }}
+    </div>
+
+    <div v-if="step.type === 'options'" class="form-options">
+      <div class="d-flex flex-wrap gap-2">
+        <VBtn
+          v-for="(option, optIndex) in step.options"
+          :key="optIndex"
+          :color="activeModelColor"
+          variant="outlined"
+          size="small"
+          class="form-option-btn"
+          @click="emit('select', { id: step.id, value: option })"
+        >
+          {{ option }}
+        </VBtn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.multi-form-container {
+  max-width: 100%;
+}
+
+.multi-form-header {
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  padding-bottom: 12px;
+}
+
+.form-title {
+  font-size: 1.1rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.step-title {
+  font-size: 0.95rem;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+}
+
+.form-question {
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.form-options .form-option-btn {
+  margin-bottom: 8px;
+  border-radius: 8px;
+  text-transform: none;
+}
+
+.form-options .form-option-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+</style>

resources/js/pages/apps/components/QuickReplies.vue

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+  replies: Array,
+  activeModelColor: String,
+  isInputCentered: Boolean,
+});
+const emit = defineEmits(['select']);
+</script>
+
+<template>
+  <div class="quick-replies-container">
+    <div
+      v-for="(reply, index) in replies"
+      :key="index"
+      class="quick-reply-item"
+    >
+      <VBtn
+        :variant="isInputCentered ? 'tonal' : 'outlined'"
+        :color="activeModelColor"
+        size="small"
+        @click="emit('select', reply)"
+        class="w-100"
+      >
+        {{ reply }}
+      </VBtn>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.quick-replies-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-gap: 8px;
+  margin-bottom: 8px;
+  width: 100%;
+}
+
+@media (max-width: 600px) {
+  .quick-replies-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.quick-reply-item {
+  width: 100%;
+}
+</style>

resources/js/pages/apps/components/SuggestionsDropdown.vue

@@ -0,0 +1,113 @@
+<script setup>
+const props = defineProps({
+  suggestions: Array,
+  selectedIndex: Number,
+  activeModelColor: String,
+});
+const emit = defineEmits(["select", "hover"]);
+</script>
+
+<template>
+  <div class="suggestions-dropdown rounded pa-2">
+    <div class="suggestions-header text-caption text-grey-darken-1 mb-1 px-2">
+      Suggestions
+    </div>
+    <div
+      v-for="(suggestion, index) in suggestions"
+      :key="index"
+      class="suggestion-item pa-2 rounded d-flex align-center"
+      :class="{ 'suggestion-selected': selectedIndex === index }"
+      @click="emit('select', suggestion)"
+      @mouseenter="emit('hover', index)"
+    >
+      <VIcon icon="tabler-search" size="16" class="me-2 text-grey-darken-1" />
+      <span class="suggestion-text">{{ suggestion }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.suggestions-dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 16px rgba(var(--v-theme-on-surface), 0.15);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  z-index: 15;
+  margin-bottom: 8px;
+  max-height: 240px;
+  overflow-y: auto;
+  animation: suggestions-fade-in 0.2s ease-out;
+}
+
+.suggestions-header {
+  font-weight: 500;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.suggestion-item {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 2px;
+  border: 1px solid transparent;
+}
+
+.suggestion-item:hover,
+.suggestion-item.suggestion-selected {
+  background: rgba(var(--v-theme-primary), 0.08);
+  border-color: rgba(var(--v-theme-primary), 0.2);
+  transform: translateX(2px);
+}
+
+.suggestion-text {
+  font-size: 0.875rem;
+  color: rgb(var(--v-theme-on-surface));
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@keyframes suggestions-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 600px) {
+  .suggestions-dropdown {
+    max-height: 200px;
+  }
+
+  .suggestion-text {
+    font-size: 0.8rem;
+  }
+}
+
+.suggestions-dropdown::-webkit-scrollbar {
+  width: 4px;
+}
+
+.suggestions-dropdown::-webkit-scrollbar-track {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border-radius: 2px;
+}
+
+.suggestions-dropdown::-webkit-scrollbar-thumb {
+  background: rgba(var(--v-theme-on-surface), 0.2);
+  border-radius: 2px;
+}
+
+.suggestions-dropdown::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--v-theme-on-surface), 0.3);
+}
+</style>

resources/js/pages/apps/components/TypingIndicator.vue

@@ -0,0 +1,72 @@
+<script setup>
+const props = defineProps({
+  activeModelColor: String,
+  activeModelBgColor: String,
+});
+</script>
+
+<template>
+  <li class="my-3 d-flex justify-start typing-indicator-container">
+    <VAvatar
+      size="32"
+      :color="activeModelColor"
+      variant="tonal"
+      class="me-2 message-avatar"
+    >
+      <VIcon icon="tabler-robot" />
+    </VAvatar>
+
+    <div
+      class="pa-3 rounded-lg message-bubble"
+      :class="`bg-${activeModelBgColor} text-${activeModelColor}`"
+    >
+      <div class="bot-typing-indicator">
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+      </div>
+    </div>
+  </li>
+</template>
+
+<style scoped>
+.typing-indicator-container {
+  animation: fade-in 0.3s ease forwards;
+}
+
+.bot-typing-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+}
+
+.bot-typing-indicator .dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgba(var(--v-theme-on-surface), 0.6);
+  margin: 0 2px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.bot-typing-indicator .dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.bot-typing-indicator .dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(0.7);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+</style>

resources/js/pages/apps/components/UploadModal.vue

@@ -0,0 +1,78 @@
+<script setup>
+const props = defineProps({
+  modelValue: Boolean,
+  files: Array,
+  fileError: String,
+  activeModelColor: String,
+});
+const emit = defineEmits(["update:modelValue", "triggerInput", "remove", "done"]);
+</script>
+
+<template>
+  <VDialog :model-value="modelValue" max-width="500" @update:modelValue="emit('update:modelValue', $event)">
+    <VCard>
+      <VCardTitle class="pb-2 pt-4">
+        <span class="text-h5">Upload Files</span>
+      </VCardTitle>
+
+      <VCardText>
+        <div class="text-subtitle-2 mb-4">
+          Select files to upload (Max 5 files, 5MB each)
+        </div>
+
+        <div
+          class="upload-area pa-6 border-dashed rounded d-flex flex-column align-center justify-center"
+          @click="emit('triggerInput')"
+          @dragover.prevent
+          @drop.prevent="$event => emit('triggerInput', $event)"
+        >
+          <VIcon :icon="'tabler-upload'" :size="36" :color="activeModelColor" class="mb-3" />
+          <div class="text-body-1 mb-1">Drag files here or click to upload</div>
+          <div class="text-caption text-grey">Supported formats: Images, PDF, DOC, DOCX, TXT</div>
+        </div>
+
+        <div v-if="fileError" class="text-error mt-2">{{ fileError }}</div>
+
+        <div v-if="files.length > 0">
+          <div class="text-subtitle-2 mt-4 mb-2">Selected files:</div>
+          <VList density="compact" class="bg-grey-lighten-5 rounded">
+            <VListItem v-for="(file, index) in files" :key="index">
+              <template v-slot:prepend>
+                <VIcon :icon="file.type.startsWith('image/') ? 'tabler-photo' : file.type.includes('pdf') ? 'tabler-file-type-pdf' : file.type.includes('word') ? 'tabler-file-type-doc' : file.type.includes('text') ? 'tabler-file-text' : 'tabler-file'" />
+              </template>
+              <VListItemTitle>{{ file.name }}</VListItemTitle>
+              <VListItemSubtitle>{{ (file.size / (1024 * 1024)).toFixed(1) }} MB</VListItemSubtitle>
+              <template v-slot:append>
+                <VBtn icon size="small" variant="text" @click="emit('remove', index)">
+                  <VIcon icon="tabler-x" />
+                </VBtn>
+              </template>
+            </VListItem>
+          </VList>
+        </div>
+      </VCardText>
+
+      <VCardActions class="pb-4 px-4">
+        <VSpacer></VSpacer>
+        <VBtn color="grey-darken-1" variant="text" @click="emit('update:modelValue', false)">Cancel</VBtn>
+        <VBtn :color="activeModelColor" variant="tonal" @click="emit('done')" :disabled="files.length === 0">Done</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.border-dashed {
+  border: 2px dashed rgba(var(--v-theme-on-surface), 0.2);
+}
+
+.upload-area {
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.upload-area:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.05);
+  border-color: rgba(var(--v-theme-on-surface), 0.4);
+}
+</style>