229 lines
8.4 KiB
Vue
229 lines
8.4 KiB
Vue
<script setup lang="ts">
|
|
import type { BaseMessage } from '~/composables/useChat';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
|
|
import type { Agent } from '~/composables/useAgents';
|
|
|
|
const { allModels } = useModels();
|
|
|
|
const inputHeight: Ref<string> = ref('auto');
|
|
const inputRef = ref<HTMLTextAreaElement | null>(null);
|
|
let tempInput = '';
|
|
const files = ref<{
|
|
id: string;
|
|
name: string;
|
|
mimeType: string;
|
|
status: 'uploading' | 'uploaded' | 'error';
|
|
url: string;
|
|
progress: number;
|
|
}[]>([]);
|
|
const inputValue = defineModel<BaseMessage>({ required: false, default: { content: '', fileIds: [] } });
|
|
const textAreaValue = ref('');
|
|
watch(textAreaValue, (newValue) => {
|
|
inputValue.value.content = newValue;
|
|
});
|
|
watch(files, (newFiles) => {
|
|
inputValue.value.fileIds = newFiles.map(f => f.id);
|
|
});
|
|
const triplit = useTriplitClient();
|
|
|
|
const emit = defineEmits<{
|
|
submit: [value: BaseMessage, model: ModelWithProvider | null];
|
|
cancel: [];
|
|
}>();
|
|
|
|
const props = defineProps<{
|
|
loading?: boolean;
|
|
agent: Agent | null;
|
|
providers?: ProviderWithModels[];
|
|
}>();
|
|
|
|
const selectedModel = ref<ModelWithProvider | null>(null);
|
|
|
|
const initializeModel = () => {
|
|
if (selectedModel.value) return;
|
|
if (!props.providers || !props.agent) return;
|
|
|
|
// Try to use agent's default model
|
|
if (props.agent.defaultModelId) {
|
|
const agentModel = allModels.value.find((m) => m.id === props.agent!.defaultModelId);
|
|
if (agentModel) {
|
|
selectedModel.value = agentModel;
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Fall back to first available model
|
|
if (allModels.value.length > 0) {
|
|
selectedModel.value = allModels.value[0]!;
|
|
updateAgentDefaultModel(selectedModel.value.id);
|
|
}
|
|
};
|
|
|
|
const updateAgentDefaultModel = async (modelId: string) => {
|
|
if (!props.agent) return;
|
|
try {
|
|
await triplit.update('agents', props.agent.id, (agent) => {
|
|
agent.defaultModelId = modelId;
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to update agent default model:', error);
|
|
}
|
|
};
|
|
|
|
// Watch for model changes and persist to agent
|
|
watch(selectedModel, (newModel) => {
|
|
if (newModel && props.agent && newModel.id !== props.agent.defaultModelId) {
|
|
updateAgentDefaultModel(newModel.id);
|
|
}
|
|
});
|
|
|
|
// Initialize when providers change
|
|
watch(() => props.providers, initializeModel, { immediate: true });
|
|
watch(() => props.agent?.defaultModelId, (newModelId) => {
|
|
const agentModel = allModels.value.find((m) => m.id === newModelId);
|
|
if (agentModel) {
|
|
selectedModel.value = agentModel;
|
|
return;
|
|
}
|
|
})
|
|
|
|
const handleSubmit = () => {
|
|
if (props.loading) {
|
|
emit('cancel');
|
|
return;
|
|
}
|
|
|
|
if (inputValue.value.content.trim() || inputValue.value.fileIds.length > 0) {
|
|
emit('submit', inputValue.value, selectedModel.value);
|
|
inputValue.value = { content: '', fileIds: [] };
|
|
textAreaValue.value = '';
|
|
}
|
|
// Reset height after sending
|
|
if (inputRef.value) inputRef.value.style.height = 'auto';
|
|
};
|
|
|
|
const handleKeyDown = async (event: KeyboardEvent) => {
|
|
if (event.key === 'Enter') {
|
|
if (event.shiftKey) return;
|
|
if (event.ctrlKey || event.metaKey) {
|
|
if (inputRef.value === null) return;
|
|
|
|
// inset new line
|
|
const cursorPosition = inputRef.value.selectionStart;
|
|
if (cursorPosition === undefined) return;
|
|
if (cursorPosition !== inputRef.value.selectionEnd) return;
|
|
|
|
textAreaValue.value =
|
|
textAreaValue.value.slice(0, cursorPosition) + '\n' + textAreaValue.value.slice(cursorPosition);
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
handleSubmit();
|
|
}
|
|
};
|
|
|
|
const handleWindowKeyDown = async (event: KeyboardEvent) => {
|
|
if (event.defaultPrevented) return;
|
|
if (event.ctrlKey || event.metaKey || event.altKey) return;
|
|
|
|
const isInteractive = document.activeElement?.closest('input, textarea, button, a, select, [contenteditable="true"]');
|
|
if (isInteractive) return;
|
|
|
|
if (!isInteractive) {
|
|
const isPrintable = event.key.length === 1;
|
|
|
|
if (isPrintable) {
|
|
inputRef.value?.focus();
|
|
} else if (event.key === 'Enter' && !props.loading) {
|
|
event.preventDefault();
|
|
handleSubmit();
|
|
inputRef.value?.focus();
|
|
}
|
|
|
|
}
|
|
};
|
|
|
|
watch(textAreaValue, async () => {
|
|
const textarea = inputRef.value;
|
|
if (!textarea) return;
|
|
|
|
inputHeight.value = 'auto';
|
|
await nextTick();
|
|
|
|
const lineHeight = 24;
|
|
const maxLines = 10;
|
|
const maxHeight = maxLines * lineHeight;
|
|
|
|
const newHeight = textarea.scrollHeight;
|
|
|
|
if (newHeight > maxHeight) {
|
|
inputHeight.value = `${maxHeight}px`;
|
|
} else {
|
|
inputHeight.value = `${newHeight}px`;
|
|
}
|
|
}, { immediate: true });
|
|
|
|
let hasCommandKey = false;
|
|
if (import.meta.server) {
|
|
const headers = useRequestHeaders();
|
|
hasCommandKey = headers['user-agent']?.includes('Mac OS') ?? false;
|
|
} else {
|
|
hasCommandKey = navigator.userAgent.includes('Mac OS');
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
tempInput = (document.getElementById('chat') as HTMLInputElement)?.value ?? '';
|
|
});
|
|
|
|
onMounted(() => {
|
|
textAreaValue.value = tempInput;
|
|
document.addEventListener('keydown', handleWindowKeyDown);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('keydown', handleWindowKeyDown);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="['w-full flex max-h-full', $attrs.class]">
|
|
<div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-2 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--bg-container)]
|
|
border-[var(--color-border)] focus-within:border-[var(--color-border-active)]">
|
|
<div v-if="files.length > 0" class="flex-1 flex gap-2 pt-2 px-2 pb-1 overflow-x-auto flex-wrap">
|
|
<!-- TODO: show attachment previews -->
|
|
<AttachmentPreview v-for="file in files" @delete="files = files.filter((f) => f.id !== file.id)"
|
|
:key="file.id" :file="file" />
|
|
</div>
|
|
<div class="flex-1 min-w-0 max-h-full">
|
|
<!-- Grammarly literally breaks everything, go fuck yourself -->
|
|
<!-- It is absolutely paramount that the closing tag for the textare has ZERO whitespace between the end of the textarea opening tag, otherwise there will be hydration errors -->
|
|
<textarea data-gramm="false" id="chat" v-model="textAreaValue" ref="inputRef"
|
|
:placeholder="`Start something great. Press ${hasCommandKey ? '⌘ + Enter' : 'ctrl + Enter'} to insert a new line.`"
|
|
@keydown="handleKeyDown" :style="{ height: inputHeight }"
|
|
class="[scrollbar-width:none] w-full bg-transparent resize-none text-[0.95em] placeholder:text-[var(--text-tertiary)]"></textarea>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between gap-2">
|
|
<!-- TODO: since we dont want to model selector dropdown to potentially overflow, it has max-width: 100%, so, we need to maake the trigger large enough to fit the entire width of the dropdown -->
|
|
<div class="flex flex-1 gap-1">
|
|
<ModelSelector v-if="providers !== undefined" :add-hotkey="true" v-model="selectedModel"
|
|
:providers="providers" />
|
|
<FileSelector :selected-model="selectedModel" v-model="files" />
|
|
</div>
|
|
<button aria-label="Send message" @click="handleSubmit"
|
|
:disabled="(!inputValue.content.trim() && files.length === 0) && !loading" :class="[
|
|
'h-8 w-8 rounded-xl transition-all duration-200 flex items-center justify-center disabled:cursor-not-allowed disabled:bg-transparent',
|
|
(inputValue.content.trim() || files.length > 0) && !loading
|
|
? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] hover:bg-[var(--color-accent-hover)]'
|
|
: 'text-[var(--text-dim)]',
|
|
loading && 'bg-[var(--color-hover)] hover:bg-[var(--color-active)]',
|
|
]">
|
|
<span v-if="loading" class="text-6.5 i-mynaui-stop-solid"></span>
|
|
<span v-else class="text-5 i-mynaui-send-solid"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|