Browse Source
- Added @ai-sdk/openai dependency to package.json and bun.lock - Implemented chat index endpoint to handle user messages and stream responses from OpenAI - Created models endpoint to retrieve active LLM providers and their models for the authenticated user - Updated drizzle-pkg database with a new SQLite fileacas
7 changed files with 993 additions and 2 deletions
@ -0,0 +1,843 @@ |
|||
<script setup lang="ts"> |
|||
import { processDataStream } from 'ai' |
|||
interface ModelOption { |
|||
id: number |
|||
name: string |
|||
modelId: string |
|||
type: string |
|||
maxTokens: number | null |
|||
} |
|||
|
|||
interface ProviderWithModels { |
|||
id: number |
|||
name: string |
|||
parseMode: string |
|||
status: string |
|||
models: ModelOption[] |
|||
} |
|||
|
|||
interface ChatMessage { |
|||
id: string |
|||
role: 'user' | 'assistant' |
|||
content: string |
|||
} |
|||
|
|||
const { data: modelsData, refresh: refreshModels } = await useHttpFetch('/api/llm/chat/models', { |
|||
getCachedData: () => undefined, |
|||
}) |
|||
|
|||
onActivated(() => { |
|||
refreshModels() |
|||
}) |
|||
|
|||
const providers = computed<ProviderWithModels[]>(() => (modelsData.value as any) ?? []) |
|||
|
|||
const allModels = computed(() => { |
|||
const result: (ModelOption & { providerName: string; providerId: number })[] = [] |
|||
for (const p of providers.value) { |
|||
for (const m of p.models) { |
|||
result.push({ ...m, providerName: p.name, providerId: p.id }) |
|||
} |
|||
} |
|||
return result |
|||
}) |
|||
|
|||
const selectedModelId = ref<number | null>(null) |
|||
const chatContainer = ref<HTMLElement | null>(null) |
|||
const messages = ref<ChatMessage[]>([]) |
|||
const inputMessage = ref('') |
|||
const isLoading = ref(false) |
|||
const errorMessage = ref('') |
|||
let abortController: AbortController | null = null |
|||
|
|||
const selectedModel = computed(() => { |
|||
if (!selectedModelId.value) return null |
|||
return allModels.value.find(m => m.id === selectedModelId.value) ?? null |
|||
}) |
|||
|
|||
function showToast(message: string, type: 'success' | 'error' = 'success') { |
|||
if (import.meta.client) { |
|||
const event = new CustomEvent('toast', { detail: { message, type } }) |
|||
window.dispatchEvent(event) |
|||
} |
|||
} |
|||
|
|||
function generateId() { |
|||
return Date.now().toString(36) + Math.random().toString(36).slice(2) |
|||
} |
|||
|
|||
watch(messages, () => { |
|||
nextTick(() => { |
|||
if (chatContainer.value) { |
|||
chatContainer.value.scrollTop = chatContainer.value.scrollHeight |
|||
} |
|||
}) |
|||
}, { deep: true }) |
|||
|
|||
async function sendMessage() { |
|||
const text = inputMessage.value.trim() |
|||
if (!text || !selectedModelId.value || isLoading.value) return |
|||
|
|||
errorMessage.value = '' |
|||
inputMessage.value = '' |
|||
|
|||
const userMsg: ChatMessage = { id: generateId(), role: 'user', content: text } |
|||
messages.value.push(userMsg) |
|||
|
|||
const assistantMsg: ChatMessage = { id: generateId(), role: 'assistant', content: '' } |
|||
messages.value.push(assistantMsg) |
|||
const assistantIdx = messages.value.length - 1 |
|||
|
|||
isLoading.value = true |
|||
abortController = new AbortController() |
|||
|
|||
try { |
|||
const res = await fetch('/api/llm/chat', { |
|||
method: 'POST', |
|||
headers: { 'Content-Type': 'application/json' }, |
|||
body: JSON.stringify({ |
|||
modelId: selectedModelId.value, |
|||
messages: messages.value |
|||
.filter(m => m.content) |
|||
.map(m => ({ role: m.role, content: m.content })), |
|||
}), |
|||
signal: abortController.signal, |
|||
}) |
|||
|
|||
if (!res.ok) { |
|||
const errText = await res.text() |
|||
throw new Error(errText || `请求失败 (${res.status})`) |
|||
} |
|||
|
|||
if (!res.body) { |
|||
throw new Error('响应体为空') |
|||
} |
|||
|
|||
await processDataStream({ |
|||
stream: res.body, |
|||
onTextPart: (text) => { |
|||
messages.value[assistantIdx].content += text |
|||
}, |
|||
onErrorPart: (error) => { |
|||
errorMessage.value = error || '流式响应出错' |
|||
showToast(errorMessage.value, 'error') |
|||
}, |
|||
}) |
|||
} catch (err: any) { |
|||
if (err.name === 'AbortError') { |
|||
// user stopped |
|||
} else { |
|||
errorMessage.value = err.message || '请求失败' |
|||
showToast(err.message || '请求失败', 'error') |
|||
if (!messages.value[assistantIdx].content) { |
|||
messages.value.splice(assistantIdx, 1) |
|||
} |
|||
} |
|||
} finally { |
|||
isLoading.value = false |
|||
abortController = null |
|||
} |
|||
} |
|||
|
|||
function stopGeneration() { |
|||
if (abortController) { |
|||
abortController.abort() |
|||
abortController = null |
|||
} |
|||
} |
|||
|
|||
function clearChat() { |
|||
messages.value = [] |
|||
errorMessage.value = '' |
|||
} |
|||
|
|||
function handleKeydown(e: KeyboardEvent) { |
|||
if (e.key === 'Enter' && !e.shiftKey) { |
|||
e.preventDefault() |
|||
sendMessage() |
|||
} |
|||
} |
|||
|
|||
function modelTypeLabel(type: string) { |
|||
const map: Record<string, string> = { text: '文本', vision: '视觉', multimodal: '多模态' } |
|||
return map[type] ?? type |
|||
} |
|||
|
|||
function modelTypeClass(type: string) { |
|||
const map: Record<string, string> = { text: 'type-text', vision: 'type-vision', multimodal: 'type-multimodal' } |
|||
return map[type] ?? 'type-text' |
|||
} |
|||
|
|||
function renderContent(content: string): string { |
|||
if (!content) return '' |
|||
return content |
|||
.replace(/&/g, '&') |
|||
.replace(/</g, '<') |
|||
.replace(/>/g, '>') |
|||
.replace(/\n/g, '<br>') |
|||
.replace(/`([^`]+)`/g, '<code>$1</code>') |
|||
.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>') |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="llm-test-page"> |
|||
<header class="page-header"> |
|||
<div class="header-left"> |
|||
<h1 class="page-title">模型测试</h1> |
|||
<p class="page-desc">选择已配置的模型进行对话测试，验证模型连接和响应效果</p> |
|||
</div> |
|||
</header> |
|||
|
|||
<div class="test-layout"> |
|||
<div class="sidebar-panel"> |
|||
<div class="panel-section"> |
|||
<label class="panel-label">选择模型</label> |
|||
<select v-model="selectedModelId" class="model-select"> |
|||
<option :value="null" disabled>请选择模型</option> |
|||
<optgroup v-for="p in providers" :key="p.id" :label="p.name"> |
|||
<option v-for="m in p.models" :key="m.id" :value="m.id"> |
|||
{{ m.name }} ({{ m.modelId }}) |
|||
</option> |
|||
</optgroup> |
|||
</select> |
|||
</div> |
|||
|
|||
<div v-if="selectedModel" class="model-info-card"> |
|||
<div class="model-info-header"> |
|||
<span class="model-info-name">{{ selectedModel.name }}</span> |
|||
<span :class="['model-type-badge', modelTypeClass(selectedModel.type)]">{{ modelTypeLabel(selectedModel.type) }}</span> |
|||
</div> |
|||
<div class="model-info-meta"> |
|||
<span class="meta-item"> |
|||
<Icon name="lucide:cpu" /> |
|||
{{ selectedModel.modelId }} |
|||
</span> |
|||
<span class="meta-item"> |
|||
<Icon name="lucide:server" /> |
|||
{{ selectedModel.providerName }} |
|||
</span> |
|||
<span v-if="selectedModel.maxTokens" class="meta-item"> |
|||
<Icon name="lucide:arrow-up-right" /> |
|||
{{ selectedModel.maxTokens.toLocaleString() }} tokens |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="allModels.length === 0" class="empty-hint"> |
|||
暂无可用模型，请先在<a href="/settings/llm-config" class="link">模型配置</a>中添加 |
|||
</div> |
|||
|
|||
<div class="panel-section panel-actions"> |
|||
<button class="btn-secondary" :disabled="messages.length === 0" @click="clearChat"> |
|||
<Icon name="lucide:trash-2" /> |
|||
清空对话 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="chat-panel"> |
|||
<div v-if="!selectedModelId" class="chat-empty"> |
|||
<div class="chat-empty-icon"> |
|||
<Icon name="lucide:message-square-text" /> |
|||
</div> |
|||
<p>选择一个模型开始对话测试</p> |
|||
</div> |
|||
|
|||
<template v-else> |
|||
<div ref="chatContainer" class="chat-messages"> |
|||
<div v-if="messages.length === 0" class="chat-welcome"> |
|||
<div class="welcome-icon"> |
|||
<Icon name="lucide:sparkles" /> |
|||
</div> |
|||
<p class="welcome-text">开始与 {{ selectedModel?.name ?? '模型' }} 对话</p> |
|||
<p class="welcome-hint">输入消息测试模型连接和响应效果</p> |
|||
</div> |
|||
|
|||
<template v-for="msg in messages" :key="msg.id"> |
|||
<div |
|||
v-if="msg.content || msg.role === 'user'" |
|||
class="chat-message" |
|||
:class="[`message-${msg.role}`]" |
|||
> |
|||
<div class="message-avatar"> |
|||
<Icon v-if="msg.role === 'user'" name="lucide:user" /> |
|||
<Icon v-else name="lucide:bot" /> |
|||
</div> |
|||
<div class="message-body"> |
|||
<div class="message-role">{{ msg.role === 'user' ? '你' : '助手' }}</div> |
|||
<div class="message-content" v-html="renderContent(msg.content)"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<div v-if="isLoading && messages.length > 0 && messages[messages.length - 1]?.content === ''" class="chat-message message-assistant"> |
|||
<div class="message-avatar"> |
|||
<Icon name="lucide:bot" /> |
|||
</div> |
|||
<div class="message-body"> |
|||
<div class="message-role">助手</div> |
|||
<div class="message-content typing-indicator"> |
|||
<span></span><span></span><span></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="errorMessage" class="chat-error"> |
|||
<Icon name="lucide:alert-circle" /> |
|||
{{ errorMessage }} |
|||
</div> |
|||
|
|||
<div class="chat-input-area"> |
|||
<div class="input-wrapper"> |
|||
<textarea |
|||
v-model="inputMessage" |
|||
class="chat-input" |
|||
placeholder="输入消息... (Enter 发送, Shift+Enter 换行)" |
|||
rows="1" |
|||
:disabled="isLoading" |
|||
@keydown="handleKeydown" |
|||
></textarea> |
|||
<div class="input-actions"> |
|||
<button |
|||
v-if="isLoading" |
|||
class="btn-stop" |
|||
@click="stopGeneration" |
|||
> |
|||
<Icon name="lucide:square" /> |
|||
停止 |
|||
</button> |
|||
<button |
|||
v-else |
|||
class="btn-send" |
|||
:disabled="!inputMessage.trim() || !selectedModelId" |
|||
@click="sendMessage" |
|||
> |
|||
<Icon name="lucide:send" /> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.llm-test-page { |
|||
padding: 40px; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page-header { |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.page-title { |
|||
font-family: var(--font-display); |
|||
font-size: 32px; |
|||
font-weight: 400; |
|||
color: var(--color-ink); |
|||
letter-spacing: -0.3px; |
|||
margin: 0 0 8px 0; |
|||
} |
|||
|
|||
.page-desc { |
|||
font-size: 14px; |
|||
color: var(--color-muted); |
|||
margin: 0; |
|||
} |
|||
|
|||
.test-layout { |
|||
display: flex; |
|||
gap: 20px; |
|||
flex: 1; |
|||
min-height: 0; |
|||
max-height: calc(100vh - 200px); |
|||
} |
|||
|
|||
.sidebar-panel { |
|||
width: 280px; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
|
|||
.panel-section { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.panel-label { |
|||
font-size: 13px; |
|||
font-weight: 500; |
|||
color: var(--color-body-strong); |
|||
} |
|||
|
|||
.model-select { |
|||
width: 100%; |
|||
padding: 10px 14px; |
|||
background: var(--color-surface-card); |
|||
border: 1px solid var(--color-hairline); |
|||
border-radius: 8px; |
|||
font-size: 14px; |
|||
color: var(--color-ink); |
|||
cursor: pointer; |
|||
transition: all 0.15s ease; |
|||
} |
|||
|
|||
.model-select:focus { |
|||
outline: none; |
|||
border-color: var(--color-primary); |
|||
box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15); |
|||
} |
|||
|
|||
.model-info-card { |
|||
background: var(--color-surface-card); |
|||
border-radius: 10px; |
|||
padding: 14px 16px; |
|||
} |
|||
|
|||
.model-info-header { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.model-info-name { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
color: var(--color-ink); |
|||
} |
|||
|
|||
.model-type-badge { |
|||
display: inline-block; |
|||
padding: 2px 8px; |
|||
border-radius: 9999px; |
|||
font-size: 11px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.type-text { |
|||
background: rgba(93, 184, 166, 0.15); |
|||
color: var(--color-accent-teal); |
|||
} |
|||
|
|||
.type-vision { |
|||
background: rgba(232, 165, 90, 0.15); |
|||
color: var(--color-accent-amber); |
|||
} |
|||
|
|||
.type-multimodal { |
|||
background: rgba(204, 120, 92, 0.15); |
|||
color: var(--color-primary); |
|||
} |
|||
|
|||
.model-info-meta { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.meta-item { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
gap: 4px; |
|||
font-size: 12px; |
|||
color: var(--color-muted); |
|||
} |
|||
|
|||
.meta-item :deep(svg) { |
|||
width: 13px; |
|||
height: 13px; |
|||
} |
|||
|
|||
.empty-hint { |
|||
font-size: 13px; |
|||
color: var(--color-muted); |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.link { |
|||
color: var(--color-primary); |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.link:hover { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.panel-actions { |
|||
margin-top: auto; |
|||
} |
|||
|
|||
.btn-secondary { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
gap: 6px; |
|||
padding: 8px 14px; |
|||
font-size: 13px; |
|||
font-weight: 500; |
|||
color: var(--color-body-strong); |
|||
background: var(--color-surface-soft); |
|||
border: 1px solid var(--color-hairline); |
|||
border-radius: 8px; |
|||
cursor: pointer; |
|||
transition: all 0.15s ease; |
|||
width: 100%; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.btn-secondary:hover:not(:disabled) { |
|||
background: var(--color-hairline); |
|||
} |
|||
|
|||
.btn-secondary:disabled { |
|||
opacity: 0.4; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
.btn-secondary :deep(svg) { |
|||
width: 14px; |
|||
height: 14px; |
|||
} |
|||
|
|||
.chat-panel { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: var(--color-surface-card); |
|||
border-radius: 12px; |
|||
overflow: hidden; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.chat-empty { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 12px; |
|||
color: var(--color-muted); |
|||
} |
|||
|
|||
.chat-empty-icon :deep(svg) { |
|||
width: 48px; |
|||
height: 48px; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.chat-empty p { |
|||
font-size: 14px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.chat-messages { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
|
|||
.chat-welcome { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 1; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.welcome-icon :deep(svg) { |
|||
width: 40px; |
|||
height: 40px; |
|||
color: var(--color-primary); |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
.welcome-text { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: var(--color-ink); |
|||
margin: 0; |
|||
} |
|||
|
|||
.welcome-hint { |
|||
font-size: 13px; |
|||
color: var(--color-muted); |
|||
margin: 0; |
|||
} |
|||
|
|||
.chat-message { |
|||
display: flex; |
|||
gap: 12px; |
|||
max-width: 85%; |
|||
} |
|||
|
|||
.message-user { |
|||
align-self: flex-end; |
|||
flex-direction: row-reverse; |
|||
} |
|||
|
|||
.message-assistant { |
|||
align-self: flex-start; |
|||
} |
|||
|
|||
.message-avatar { |
|||
width: 32px; |
|||
height: 32px; |
|||
border-radius: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.message-user .message-avatar { |
|||
background: var(--color-primary); |
|||
color: var(--color-on-primary); |
|||
} |
|||
|
|||
.message-assistant .message-avatar { |
|||
background: var(--color-surface-soft); |
|||
color: var(--color-body-strong); |
|||
} |
|||
|
|||
.message-avatar :deep(svg) { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
|
|||
.message-body { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 4px; |
|||
} |
|||
|
|||
.message-role { |
|||
font-size: 11px; |
|||
font-weight: 500; |
|||
color: var(--color-muted); |
|||
} |
|||
|
|||
.message-user .message-role { |
|||
text-align: right; |
|||
} |
|||
|
|||
.message-content { |
|||
font-size: 14px; |
|||
line-height: 1.6; |
|||
color: var(--color-body); |
|||
word-break: break-word; |
|||
} |
|||
|
|||
.message-user .message-content { |
|||
background: var(--color-primary); |
|||
color: var(--color-on-primary); |
|||
padding: 10px 14px; |
|||
border-radius: 12px 12px 4px 12px; |
|||
} |
|||
|
|||
.message-assistant .message-content { |
|||
background: var(--color-canvas); |
|||
padding: 10px 14px; |
|||
border-radius: 12px 12px 12px 4px; |
|||
border: 1px solid var(--color-hairline); |
|||
} |
|||
|
|||
.message-content :deep(code) { |
|||
background: rgba(0, 0, 0, 0.06); |
|||
padding: 1px 5px; |
|||
border-radius: 4px; |
|||
font-size: 13px; |
|||
font-family: monospace; |
|||
} |
|||
|
|||
.message-user .message-content :deep(code) { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
.typing-indicator { |
|||
display: flex; |
|||
gap: 4px; |
|||
align-items: center; |
|||
padding: 10px 14px; |
|||
} |
|||
|
|||
.typing-indicator span { |
|||
width: 6px; |
|||
height: 6px; |
|||
border-radius: 50%; |
|||
background: var(--color-muted); |
|||
animation: typing 1.4s infinite; |
|||
} |
|||
|
|||
.typing-indicator span:nth-child(2) { |
|||
animation-delay: 0.2s; |
|||
} |
|||
|
|||
.typing-indicator span:nth-child(3) { |
|||
animation-delay: 0.4s; |
|||
} |
|||
|
|||
@keyframes typing { |
|||
0%, 60%, 100% { |
|||
opacity: 0.3; |
|||
transform: scale(0.8); |
|||
} |
|||
30% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
|
|||
.chat-error { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 6px; |
|||
padding: 8px 16px; |
|||
background: rgba(198, 69, 69, 0.1); |
|||
color: var(--color-error); |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.chat-error :deep(svg) { |
|||
width: 14px; |
|||
height: 14px; |
|||
} |
|||
|
|||
.chat-input-area { |
|||
padding: 16px 20px; |
|||
border-top: 1px solid var(--color-hairline); |
|||
background: var(--color-canvas); |
|||
} |
|||
|
|||
.input-wrapper { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
gap: 8px; |
|||
background: var(--color-surface-card); |
|||
border: 1px solid var(--color-hairline); |
|||
border-radius: 10px; |
|||
padding: 8px 12px; |
|||
transition: all 0.15s ease; |
|||
} |
|||
|
|||
.input-wrapper:focus-within { |
|||
border-color: var(--color-primary); |
|||
box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15); |
|||
} |
|||
|
|||
.chat-input { |
|||
flex: 1; |
|||
border: none; |
|||
background: transparent; |
|||
font-size: 14px; |
|||
color: var(--color-ink); |
|||
resize: none; |
|||
outline: none; |
|||
min-height: 24px; |
|||
max-height: 120px; |
|||
line-height: 1.5; |
|||
font-family: inherit; |
|||
} |
|||
|
|||
.chat-input::placeholder { |
|||
color: var(--color-muted); |
|||
} |
|||
|
|||
.chat-input:disabled { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.input-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.btn-send { |
|||
width: 32px; |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: var(--color-primary); |
|||
color: var(--color-on-primary); |
|||
border: none; |
|||
border-radius: 8px; |
|||
cursor: pointer; |
|||
transition: background 0.15s ease; |
|||
} |
|||
|
|||
.btn-send:hover:not(:disabled) { |
|||
background: var(--color-primary-active); |
|||
} |
|||
|
|||
.btn-send:disabled { |
|||
opacity: 0.4; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
.btn-send :deep(svg) { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
|
|||
.btn-stop { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
gap: 4px; |
|||
padding: 6px 12px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
color: var(--color-error); |
|||
background: rgba(198, 69, 69, 0.1); |
|||
border: 1px solid rgba(198, 69, 69, 0.2); |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
transition: all 0.15s ease; |
|||
} |
|||
|
|||
.btn-stop:hover { |
|||
background: rgba(198, 69, 69, 0.2); |
|||
} |
|||
|
|||
.btn-stop :deep(svg) { |
|||
width: 12px; |
|||
height: 12px; |
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.llm-test-page { |
|||
padding: 24px; |
|||
} |
|||
|
|||
.test-layout { |
|||
flex-direction: column; |
|||
max-height: none; |
|||
} |
|||
|
|||
.sidebar-panel { |
|||
width: 100%; |
|||
} |
|||
|
|||
.chat-panel { |
|||
min-height: 500px; |
|||
} |
|||
|
|||
.chat-message { |
|||
max-width: 95%; |
|||
} |
|||
} |
|||
</style> |
|||
Binary file not shown.
@ -0,0 +1,54 @@ |
|||
import { requireUser } from "#server/utils/context"; |
|||
import { getProviderById, getModelById } from "#server/service/llm"; |
|||
import { createOpenAI } from "@ai-sdk/openai"; |
|||
import { streamText } from "ai"; |
|||
|
|||
export default defineEventHandler(async (event) => { |
|||
const user = await requireUser(event); |
|||
if (!user) { |
|||
throw createError({ statusCode: 401, statusMessage: "未登录" }); |
|||
} |
|||
|
|||
const body = await readBody(event); |
|||
const { modelId: llmModelId, messages } = body as { |
|||
modelId: number; |
|||
messages: { role: "user" | "assistant" | "system"; content: string }[]; |
|||
}; |
|||
|
|||
if (!llmModelId || !messages || !Array.isArray(messages) || messages.length === 0) { |
|||
throw createError({ statusCode: 400, statusMessage: "参数无效" }); |
|||
} |
|||
|
|||
const model = await getModelById(llmModelId, user.id); |
|||
if (!model) { |
|||
throw createError({ statusCode: 404, statusMessage: "模型不存在" }); |
|||
} |
|||
|
|||
const provider = await getProviderById(model.providerId, user.id); |
|||
if (!provider) { |
|||
throw createError({ statusCode: 404, statusMessage: "供应商不存在" }); |
|||
} |
|||
|
|||
if (provider.status !== "active") { |
|||
throw createError({ statusCode: 400, statusMessage: "供应商已禁用" }); |
|||
} |
|||
|
|||
if (!provider.apiKey) { |
|||
throw createError({ statusCode: 400, statusMessage: "供应商未配置 API Key" }); |
|||
} |
|||
|
|||
const baseUrl = provider.baseUrl?.replace(/\/+$/, "") || undefined; |
|||
|
|||
const openai = createOpenAI({ |
|||
apiKey: provider.apiKey, |
|||
baseURL: baseUrl, |
|||
}); |
|||
|
|||
const result = streamText({ |
|||
model: openai(model.modelId), |
|||
messages, |
|||
maxTokens: model.maxTokens || undefined, |
|||
}); |
|||
|
|||
return result.toDataStreamResponse(); |
|||
}); |
|||
@ -0,0 +1,43 @@ |
|||
import { requireUser } from "#server/utils/context"; |
|||
import { getProviderById } from "#server/service/llm"; |
|||
import { dbGlobal } from "drizzle-pkg/lib/db"; |
|||
import { llmProviders, llmModels } from "drizzle-pkg/lib/schema/llm"; |
|||
import { eq, and } from "drizzle-orm"; |
|||
|
|||
export default defineWrappedResponseHandler(async (event) => { |
|||
const user = await requireUser(event); |
|||
|
|||
const providers = await dbGlobal |
|||
.select({ |
|||
id: llmProviders.id, |
|||
name: llmProviders.name, |
|||
parseMode: llmProviders.parseMode, |
|||
status: llmProviders.status, |
|||
}) |
|||
.from(llmProviders) |
|||
.where(and(eq(llmProviders.userId, user.id), eq(llmProviders.status, "active"))); |
|||
|
|||
const result = []; |
|||
|
|||
for (const provider of providers) { |
|||
const models = await dbGlobal |
|||
.select({ |
|||
id: llmModels.id, |
|||
name: llmModels.name, |
|||
modelId: llmModels.modelId, |
|||
type: llmModels.type, |
|||
maxTokens: llmModels.maxTokens, |
|||
}) |
|||
.from(llmModels) |
|||
.where(and(eq(llmModels.providerId, provider.id), eq(llmModels.enabled, 1))); |
|||
|
|||
if (models.length > 0) { |
|||
result.push({ |
|||
...provider, |
|||
models, |
|||
}); |
|||
} |
|||
} |
|||
|
|||
return R.success(result); |
|||
}); |
|||
Loading…
Reference in new issue