Dorian
7a0e42bf63
- Added Jamendo API client ID to the environment configuration for music search. - Updated pnpm lock file to include new dependencies for enhanced functionality. - Integrated Plyr library for improved media playback experience. - Refactored ChatHeader, ChatInput, and ChatMessage components to utilize new styles and improve user interaction. - Enhanced CSS styles for path-glass elements to align with the new design system. Made-with: Cursor
82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<div class="p-3 md:p-4">
|
|
<div
|
|
class="path-glass-bubble rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
|
|
:class="focused
|
|
? isDark
|
|
? 'border-white/30'
|
|
: 'border-black/20'
|
|
: ''"
|
|
>
|
|
<textarea
|
|
ref="textareaRef"
|
|
v-model="text"
|
|
rows="1"
|
|
:placeholder="placeholder"
|
|
class="flex-1 resize-none bg-transparent text-sm outline-none min-h-[24px] max-h-[120px]"
|
|
:class="isDark
|
|
? 'text-white/90 placeholder:text-white/25'
|
|
: 'text-gray-800 placeholder:text-gray-400'"
|
|
@keydown.enter.exact.prevent="send"
|
|
@input="autoResize"
|
|
@focus="focused = true"
|
|
@blur="focused = false"
|
|
/>
|
|
<button
|
|
:disabled="!canSend"
|
|
class="shrink-0 path-glass-button path-glass-button-sm rounded-xl px-3 transition-all duration-200"
|
|
:class="canSend
|
|
? 'hover:opacity-80 active:scale-95'
|
|
: 'opacity-30 cursor-not-allowed'"
|
|
aria-label="Send message"
|
|
@click="send"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, nextTick } from 'vue'
|
|
import { useTheme } from '@/composables/useTheme'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
disabled?: boolean
|
|
placeholder?: string
|
|
}>(),
|
|
{
|
|
disabled: false,
|
|
placeholder: 'Message AIUI...',
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
send: [text: string]
|
|
}>()
|
|
|
|
const { isDark } = useTheme()
|
|
const text = ref('')
|
|
const focused = ref(false)
|
|
const textareaRef = ref<HTMLTextAreaElement | null>(null)
|
|
|
|
const canSend = computed(() => text.value.trim().length > 0 && !props.disabled)
|
|
|
|
function send() {
|
|
if (!canSend.value) return
|
|
emit('send', text.value.trim())
|
|
text.value = ''
|
|
nextTick(autoResize)
|
|
}
|
|
|
|
function autoResize() {
|
|
const el = textareaRef.value
|
|
if (!el) return
|
|
el.style.height = 'auto'
|
|
el.style.height = Math.min(el.scrollHeight, 120) + 'px'
|
|
}
|
|
</script>
|