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>