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

<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>