303 lines
7.8 KiB
Vue
303 lines
7.8 KiB
Vue
<template>
|
|
<div class="chat-input">
|
|
<div class="input-container">
|
|
<div class="options-wrapper">
|
|
<button
|
|
class="options-toggle"
|
|
:class="{ active: showOptions }"
|
|
@click="showOptions = !showOptions"
|
|
title="Toggle Options"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
</svg>
|
|
</button>
|
|
<transition name="slide-down">
|
|
<div v-if="showOptions" class="input-options">
|
|
<label class="option-checkbox">
|
|
<input type="checkbox" v-model="renderStore.renderHTML" />
|
|
<span class="checkmark"></span>
|
|
<span class="option-label">HTML渲染</span>
|
|
</label>
|
|
<label class="option-checkbox">
|
|
<input type="checkbox" v-model="renderStore.renderMarkdown" />
|
|
<span class="checkmark"></span>
|
|
<span class="option-label">MD渲染</span>
|
|
</label>
|
|
<label class="option-checkbox">
|
|
<input type="checkbox" v-model="renderStore.enableDynamicTables" />
|
|
<span class="checkmark"></span>
|
|
<span class="option-label">动态表格</span>
|
|
</label>
|
|
<label class="option-checkbox">
|
|
<input type="checkbox" v-model="renderStore.enableDrawing" />
|
|
<span class="checkmark"></span>
|
|
<span class="option-label">绘图</span>
|
|
</label>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
<textarea
|
|
placeholder="Type your message..."
|
|
class="message-input"
|
|
rows="1"
|
|
></textarea>
|
|
<button class="send-btn" title="Send Message">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="22" y1="2" x2="11" y2="13"></line>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useMessageRenderStore } from '@/stores/useMessageRenderStore';
|
|
|
|
const showOptions = ref(false);
|
|
|
|
// Use Pinia store for render options
|
|
const renderStore = useMessageRenderStore();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chat-input {
|
|
flex-shrink: 0;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
border-top: 1px solid var(--color-border-light);
|
|
background-color: var(--color-bg-secondary);
|
|
box-shadow: var(--shadow-lg), 0 -4px 12px rgba(0, 0, 0, 0.03);
|
|
width: 100%;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
width: 100%;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.options-wrapper {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.options-toggle {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--color-bg-primary);
|
|
color: var(--color-text-secondary);
|
|
border: 1px solid var(--color-border);
|
|
cursor: pointer;
|
|
transition: all var(--transition-normal);
|
|
box-shadow: var(--shadow-inner);
|
|
}
|
|
|
|
.options-toggle:hover {
|
|
background-color: var(--color-bg-secondary);
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.options-toggle.active {
|
|
background-color: var(--color-accent-light);
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.options-toggle svg {
|
|
transition: transform var(--transition-normal);
|
|
}
|
|
|
|
.options-toggle.active svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.input-options {
|
|
position: absolute;
|
|
bottom: calc(100% + var(--spacing-sm));
|
|
left: 0;
|
|
background-color: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-sm);
|
|
box-shadow: var(--shadow-xl);
|
|
z-index: var(--z-dropdown);
|
|
min-width: 140px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.option-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
cursor: pointer;
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
|
|
.option-checkbox input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.checkmark {
|
|
height: 16px;
|
|
width: 16px;
|
|
background-color: var(--color-bg-primary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
transition: all var(--transition-fast);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.option-checkbox:hover .checkmark {
|
|
border-color: var(--color-accent);
|
|
background-color: var(--color-accent-light);
|
|
}
|
|
|
|
.option-checkbox input:checked ~ .checkmark {
|
|
background-color: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
left: 5px;
|
|
top: 2px;
|
|
width: 4px;
|
|
height: 8px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.option-checkbox input:checked ~ .checkmark:after {
|
|
display: block;
|
|
}
|
|
|
|
.option-label {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Slide down animation */
|
|
.slide-down-enter-active,
|
|
.slide-down-leave-active {
|
|
transition: all var(--transition-normal);
|
|
}
|
|
|
|
.slide-down-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.slide-down-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.message-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background-color: var(--color-bg-primary);
|
|
color: var(--color-text-primary);
|
|
font-size: 0.9rem;
|
|
resize: none;
|
|
min-height: 44px;
|
|
max-height: 160px;
|
|
transition: all var(--transition-normal);
|
|
font-family: inherit;
|
|
line-height: 1.5;
|
|
letter-spacing: 0.01em;
|
|
box-shadow: var(--shadow-inner);
|
|
}
|
|
|
|
.message-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 3px var(--color-accent-light), var(--shadow-inner);
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
.message-input::placeholder {
|
|
color: var(--color-text-muted);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.send-btn {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all var(--transition-normal);
|
|
flex-shrink: 0;
|
|
box-shadow: var(--shadow-md), 0 0 0 1px rgba(91, 127, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.send-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s, height 0.6s;
|
|
}
|
|
|
|
.send-btn:hover::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.send-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-xl), 0 0 0 2px rgba(91, 127, 255, 0.2);
|
|
}
|
|
|
|
.send-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.send-btn svg {
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: transform var(--transition-normal);
|
|
}
|
|
|
|
.send-btn:hover svg {
|
|
transform: scale(1.1) rotate(-5deg);
|
|
}
|
|
</style>
|