859 lines
21 KiB
Vue
859 lines
21 KiB
Vue
|
<!--
|
|||
|
|
Copyright 2024-2026 ReplyPier
|
|||
|
|
|
|||
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|||
|
|
you may not use this file except in compliance with the License.
|
|||
|
|
You may obtain a copy of the License at
|
|||
|
|
|
|||
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|||
|
|
|
|||
|
|
Unless required by applicable law or agreed to in writing, software
|
|||
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|||
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
|
|
See the License for the specific language governing permissions and
|
|||
|
|
limitations under the License.
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed } from 'vue'
|
|||
|
|
import { useAgentEdit } from '@/composables/useAgentEdit'
|
|||
|
|
import KnowledgeGrid from '@/components/agent/KnowledgeGrid.vue'
|
|||
|
|
import { ExitCondition } from '@/types/workflow'
|
|||
|
|
import type { UserGroup } from '@/types/user'
|
|||
|
|
|
|||
|
|
interface FormData {
|
|||
|
|
system_prompt: string
|
|||
|
|
temperature: number
|
|||
|
|
exit_condition: string
|
|||
|
|
auto_transfer_enabled: boolean
|
|||
|
|
transfer_group_id: string
|
|||
|
|
ask_for_rating: boolean
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
modelValue: FormData
|
|||
|
|
validationErrors: Record<string, string>
|
|||
|
|
userGroups: UserGroup[]
|
|||
|
|
loadingGroups: boolean
|
|||
|
|
agentId: string
|
|||
|
|
organizationId: string
|
|||
|
|
collapsedSections: Record<string, boolean>
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'update:modelValue', value: FormData): void
|
|||
|
|
(e: 'validateField', field: string): void
|
|||
|
|
(e: 'toggleSection', section: string): void
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
// Local reactive copy of the form data
|
|||
|
|
const localFormData = computed({
|
|||
|
|
get: () => props.modelValue,
|
|||
|
|
set: (value) => emit('update:modelValue', value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// AI generation state
|
|||
|
|
const showAIPrompt = ref(false)
|
|||
|
|
const aiPrompt = ref('')
|
|||
|
|
|
|||
|
|
// Initialize agent edit composable (using a mock agent object for AI generation)
|
|||
|
|
const mockAgent = {
|
|||
|
|
id: 'temp-agent',
|
|||
|
|
name: 'Workflow Node Agent',
|
|||
|
|
display_name: 'Workflow Node Agent',
|
|||
|
|
description: 'Temporary agent for AI generation',
|
|||
|
|
agent_type: 'general',
|
|||
|
|
instructions: '',
|
|||
|
|
transfer_to_human: false,
|
|||
|
|
ask_for_rating: false,
|
|||
|
|
organization_id: 'temp',
|
|||
|
|
created_by: 'temp',
|
|||
|
|
created_at: new Date(),
|
|||
|
|
updated_at: new Date(),
|
|||
|
|
is_active: true,
|
|||
|
|
enable_rate_limiting: false,
|
|||
|
|
overall_limit_per_ip: 0,
|
|||
|
|
requests_per_sec: 0,
|
|||
|
|
conversation_starters: [],
|
|||
|
|
knowledge_base_ids: [],
|
|||
|
|
canvas_data: {}
|
|||
|
|
} as any
|
|||
|
|
|
|||
|
|
const { generateInstructions, isLoading: aiLoading, error: aiError } = useAgentEdit(mockAgent)
|
|||
|
|
|
|||
|
|
// Handle field updates
|
|||
|
|
const updateField = (field: keyof FormData, value: any) => {
|
|||
|
|
const updated = { ...localFormData.value, [field]: value }
|
|||
|
|
emit('update:modelValue', updated)
|
|||
|
|
emit('validateField', field)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Handle AI generation for system prompt
|
|||
|
|
const handleGenerateWithAI = async () => {
|
|||
|
|
if (!aiPrompt.value.trim()) return
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const generatedInstructions = await generateInstructions(aiPrompt.value)
|
|||
|
|
if (generatedInstructions.length > 0) {
|
|||
|
|
// Join the generated instructions with newlines
|
|||
|
|
updateField('system_prompt', generatedInstructions.join('\n'))
|
|||
|
|
showAIPrompt.value = false
|
|||
|
|
aiPrompt.value = ''
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Failed to generate instructions:', err)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const validateFieldOnChange = (field: string) => {
|
|||
|
|
emit('validateField', field)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const toggleSection = (section: string) => {
|
|||
|
|
emit('toggleSection', section)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="llm-node-config">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<div class="instructions-header">
|
|||
|
|
<label for="system-prompt">指令 *</label>
|
|||
|
|
<button
|
|||
|
|
class="ai-generate-button"
|
|||
|
|
@click="showAIPrompt = true"
|
|||
|
|
:disabled="aiLoading"
|
|||
|
|
type="button"
|
|||
|
|
>
|
|||
|
|
<span class="ai-icon">✨</span>
|
|||
|
|
AI 生成
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<textarea
|
|||
|
|
id="system-prompt"
|
|||
|
|
:value="localFormData.system_prompt"
|
|||
|
|
@input="updateField('system_prompt', ($event.target as HTMLInputElement).value)"
|
|||
|
|
class="form-textarea"
|
|||
|
|
:class="{ 'error': validationErrors.system_prompt }"
|
|||
|
|
placeholder="输入给 AI 的系统提示词"
|
|||
|
|
rows="4"
|
|||
|
|
required
|
|||
|
|
@blur="validateFieldOnChange('system_prompt')"
|
|||
|
|
></textarea>
|
|||
|
|
<div v-if="validationErrors.system_prompt" class="error-message">
|
|||
|
|
{{ validationErrors.system_prompt }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="temperature">温度</label>
|
|||
|
|
<input
|
|||
|
|
id="temperature"
|
|||
|
|
:value="localFormData.temperature"
|
|||
|
|
@input="updateField('temperature', parseFloat(($event.target as HTMLInputElement).value))"
|
|||
|
|
type="number"
|
|||
|
|
class="form-input"
|
|||
|
|
:class="{ 'error': validationErrors.temperature }"
|
|||
|
|
min="0"
|
|||
|
|
max="2"
|
|||
|
|
step="0.1"
|
|||
|
|
placeholder="0.7"
|
|||
|
|
@blur="validateFieldOnChange('temperature')"
|
|||
|
|
/>
|
|||
|
|
<div v-if="validationErrors.temperature" class="error-message">
|
|||
|
|
{{ validationErrors.temperature }}
|
|||
|
|
</div>
|
|||
|
|
<p class="help-text">
|
|||
|
|
控制回复的随机性。数值越低（0.1）越聚焦，数值越高（1.5）越有创造性。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="exit-condition">退出条件 *</label>
|
|||
|
|
<select
|
|||
|
|
id="exit-condition"
|
|||
|
|
:value="localFormData.exit_condition"
|
|||
|
|
@change="updateField('exit_condition', ($event.target as HTMLSelectElement).value)"
|
|||
|
|
class="form-select"
|
|||
|
|
:class="{ 'error': validationErrors.exit_condition }"
|
|||
|
|
required
|
|||
|
|
@blur="validateFieldOnChange('exit_condition')"
|
|||
|
|
>
|
|||
|
|
<option :value="ExitCondition.SINGLE_EXECUTION">单次执行</option>
|
|||
|
|
<option :value="ExitCondition.CONTINUOUS_EXECUTION">持续执行</option>
|
|||
|
|
</select>
|
|||
|
|
<div v-if="validationErrors.exit_condition" class="error-message">
|
|||
|
|
{{ validationErrors.exit_condition }}
|
|||
|
|
</div>
|
|||
|
|
<p class="help-text">
|
|||
|
|
<template v-if="localFormData.exit_condition === ExitCondition.SINGLE_EXECUTION">
|
|||
|
|
AI 回复一次后总是进入下一个节点（默认）。
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="localFormData.exit_condition === ExitCondition.CONTINUOUS_EXECUTION">
|
|||
|
|
停留在当前节点持续对话，直到请求结束会话。
|
|||
|
|
</template>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Transfer to Human Setting - Only for Continuous Execution -->
|
|||
|
|
<div v-if="localFormData.exit_condition === ExitCondition.CONTINUOUS_EXECUTION" class="form-group">
|
|||
|
|
<label class="checkbox-group">
|
|||
|
|
<input
|
|||
|
|
:checked="localFormData.auto_transfer_enabled"
|
|||
|
|
@change="updateField('auto_transfer_enabled', ($event.target as HTMLInputElement).checked)"
|
|||
|
|
type="checkbox"
|
|||
|
|
class="form-checkbox"
|
|||
|
|
/>
|
|||
|
|
<span class="checkbox-label">启用自动转人工</span>
|
|||
|
|
</label>
|
|||
|
|
<p class="help-text">
|
|||
|
|
启用后，AI 判断需要人工协助时可自动将会话转接给人工客服，且不会结束会话。
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<!-- Group selection - Only when transfer is enabled -->
|
|||
|
|
<div v-if="localFormData.auto_transfer_enabled" class="transfer-groups">
|
|||
|
|
<label for="transfer-group">转接分组</label>
|
|||
|
|
<div v-if="!loadingGroups">
|
|||
|
|
<select
|
|||
|
|
id="transfer-group"
|
|||
|
|
:value="localFormData.transfer_group_id"
|
|||
|
|
@change="updateField('transfer_group_id', ($event.target as HTMLSelectElement).value)"
|
|||
|
|
class="form-select"
|
|||
|
|
>
|
|||
|
|
<option value="">选择分组</option>
|
|||
|
|
<option v-for="group in userGroups" :key="group.id" :value="group.id">
|
|||
|
|
{{ group.name }}
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
<p v-if="userGroups.length === 0" class="help-text no-groups-message">
|
|||
|
|
暂无可用分组。
|
|||
|
|
<router-link to="/human-agents" class="create-group-link">
|
|||
|
|
创建分组
|
|||
|
|
</router-link>
|
|||
|
|
</p>
|
|||
|
|
<p v-else class="help-text">
|
|||
|
|
选择负责处理转接会话的分组。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="loading-groups">
|
|||
|
|
正在加载分组……
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Request Rating Setting - Only for Continuous Execution -->
|
|||
|
|
<div v-if="localFormData.exit_condition === ExitCondition.CONTINUOUS_EXECUTION" class="form-group">
|
|||
|
|
<label class="checkbox-group">
|
|||
|
|
<input
|
|||
|
|
:checked="localFormData.ask_for_rating"
|
|||
|
|
@change="updateField('ask_for_rating', ($event.target as HTMLInputElement).checked)"
|
|||
|
|
type="checkbox"
|
|||
|
|
class="form-checkbox"
|
|||
|
|
/>
|
|||
|
|
<span class="checkbox-label">会话结束后邀请评分</span>
|
|||
|
|
</label>
|
|||
|
|
<p class="help-text">
|
|||
|
|
启用后，会话结束时将邀请客户对体验进行评分。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Knowledge Section -->
|
|||
|
|
<div class="form-group">
|
|||
|
|
<div class="knowledge-section">
|
|||
|
|
<div class="section-header knowledge-header" @click="toggleSection('knowledge')">
|
|||
|
|
<div class="section-title">
|
|||
|
|
<svg class="section-icon" :class="{ 'rotated': collapsedSections.knowledge }" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<polyline points="6,9 12,15 18,9"></polyline>
|
|||
|
|
</svg>
|
|||
|
|
<span>知识来源</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="section-content knowledge-content" :class="{ 'collapsed': collapsedSections.knowledge }">
|
|||
|
|
<div class="knowledge-wrapper">
|
|||
|
|
<KnowledgeGrid
|
|||
|
|
v-if="!collapsedSections.knowledge"
|
|||
|
|
:agent-id="agentId"
|
|||
|
|
:organization-id="organizationId"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- AI Prompt Modal -->
|
|||
|
|
<div v-if="showAIPrompt" class="ai-prompt-modal">
|
|||
|
|
<div class="ai-prompt-content">
|
|||
|
|
<h5>用 AI 生成指令</h5>
|
|||
|
|
<textarea
|
|||
|
|
v-model="aiPrompt"
|
|||
|
|
placeholder="描述你希望这个 AI 节点做什么。例如：“为一个帮助查询订单的客服助手生成指令”"
|
|||
|
|
rows="4"
|
|||
|
|
class="ai-prompt-textarea"
|
|||
|
|
></textarea>
|
|||
|
|
<div v-if="aiError" class="error-message">{{ aiError }}</div>
|
|||
|
|
<div class="ai-prompt-actions">
|
|||
|
|
<button
|
|||
|
|
class="cancel-ai-button"
|
|||
|
|
@click="showAIPrompt = false"
|
|||
|
|
:disabled="aiLoading"
|
|||
|
|
type="button"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="generate-ai-button"
|
|||
|
|
@click="handleGenerateWithAI"
|
|||
|
|
:disabled="aiLoading || !aiPrompt.trim()"
|
|||
|
|
type="button"
|
|||
|
|
>
|
|||
|
|
{{ aiLoading ? '生成中……' : '生成' }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* Import shared form styles */
|
|||
|
|
.form-group {
|
|||
|
|
margin-bottom: var(--space-sm);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-input,
|
|||
|
|
.form-textarea,
|
|||
|
|
.form-select {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 8px;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
background: var(--background-color);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
transition: border-color 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-input:focus,
|
|||
|
|
.form-textarea:focus,
|
|||
|
|
.form-select:focus {
|
|||
|
|
outline: none;
|
|||
|
|
border-color: var(--primary-color);
|
|||
|
|
box-shadow: 0 0 0 2px rgba(201, 242, 78, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-input.error,
|
|||
|
|
.form-textarea.error,
|
|||
|
|
.form-select.error {
|
|||
|
|
border-color: var(--error-color);
|
|||
|
|
background-color: rgba(239, 68, 68, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-input.error:focus,
|
|||
|
|
.form-textarea.error:focus,
|
|||
|
|
.form-select.error:focus {
|
|||
|
|
border-color: var(--error-color);
|
|||
|
|
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-message {
|
|||
|
|
color: var(--error-color);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-message::before {
|
|||
|
|
content: "⚠";
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-textarea {
|
|||
|
|
resize: vertical;
|
|||
|
|
min-height: 70px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkbox-group {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin: 8px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkbox-group input[type="checkbox"] {
|
|||
|
|
margin-top: 2px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkbox-label {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-text {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
margin-top: 4px;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-checkbox {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
margin: 0;
|
|||
|
|
cursor: pointer;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Instructions Header Styles */
|
|||
|
|
.instructions-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-generate-button {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: var(--radius-sm);
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-generate-button:hover:not(:disabled) {
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-generate-button:disabled {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-icon {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* AI Prompt Modal Styles */
|
|||
|
|
.ai-prompt-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-prompt-content {
|
|||
|
|
background: var(--background-color);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
padding: var(--space-lg);
|
|||
|
|
width: 90%;
|
|||
|
|
max-width: 500px;
|
|||
|
|
box-shadow: var(--shadow-xl);
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: var(--space-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-prompt-content h5 {
|
|||
|
|
margin: 0 0 var(--space-sm) 0;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-prompt-textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
background: var(--background-soft);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
resize: vertical;
|
|||
|
|
min-height: 100px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-prompt-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: var(--space-sm);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-ai-button,
|
|||
|
|
.generate-ai-button {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
min-width: 80px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-ai-button {
|
|||
|
|
background: var(--background-muted);
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-ai-button:hover {
|
|||
|
|
background: var(--background-alt);
|
|||
|
|
color: var(--text-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.generate-ai-button {
|
|||
|
|
background: var(--accent-solid);
|
|||
|
|
color: var(--on-accent-solid);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.generate-ai-button:hover {
|
|||
|
|
background: var(--primary-dark);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.generate-ai-button:disabled {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Transfer groups styling */
|
|||
|
|
.transfer-groups {
|
|||
|
|
margin-top: var(--space-md);
|
|||
|
|
padding: var(--space-md);
|
|||
|
|
background: var(--background-alt);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.transfer-groups label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-groups-message {
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.create-group-link {
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.create-group-link:hover {
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-groups {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: var(--space-sm);
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Knowledge Section Styles */
|
|||
|
|
.knowledge-section {
|
|||
|
|
margin-top: var(--space-md);
|
|||
|
|
border: 1px solid var(--border-color);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
background: var(--background-color);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-header .section-header {
|
|||
|
|
background: var(--background-muted);
|
|||
|
|
border-bottom: 1px solid var(--border-color);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: var(--space-sm) var(--space-md);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-header .section-header:hover {
|
|||
|
|
background: var(--background-alt);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: var(--space-xs);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-icon {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
transition: transform 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-icon.rotated {
|
|||
|
|
transform: rotate(-90deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content {
|
|||
|
|
padding: 0;
|
|||
|
|
max-height: none;
|
|||
|
|
overflow: visible;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content.collapsed {
|
|||
|
|
max-height: 0;
|
|||
|
|
padding-top: 0;
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
opacity: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Override KnowledgeGrid styles within LLMNodeConfig */
|
|||
|
|
.knowledge-content :deep(.knowledge-grid-container) {
|
|||
|
|
padding: var(--space-sm);
|
|||
|
|
background: transparent;
|
|||
|
|
border-top: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.knowledge-header) {
|
|||
|
|
margin-bottom: var(--space-sm);
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: var(--space-xs);
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.header-left) {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: var(--space-xs);
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.header-left h3) {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.header-actions) {
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--space-xs);
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.action-button) {
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.knowledge-grid) {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.knowledge-grid-header),
|
|||
|
|
.knowledge-content :deep(.knowledge-grid-row) {
|
|||
|
|
grid-template-columns: 1fr 60px;
|
|||
|
|
min-height: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.header-cell),
|
|||
|
|
.knowledge-content :deep(.grid-cell) {
|
|||
|
|
padding: var(--space-xs) var(--space-sm);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.header-cell:nth-child(2)),
|
|||
|
|
.knowledge-content :deep(.header-cell:nth-child(3)),
|
|||
|
|
.knowledge-content :deep(.header-cell:nth-child(4)),
|
|||
|
|
.knowledge-content :deep(.grid-cell:nth-child(2)),
|
|||
|
|
.knowledge-content :deep(.grid-cell:nth-child(3)),
|
|||
|
|
.knowledge-content :deep(.grid-cell:nth-child(4)) {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.actions-cell) {
|
|||
|
|
width: 60px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.delete-button) {
|
|||
|
|
padding: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.delete-icon) {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.knowledge-empty) {
|
|||
|
|
padding: var(--space-md);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.warning-message) {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
margin-bottom: var(--space-xs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.warning-description) {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.modal-content) {
|
|||
|
|
max-width: 30vw;
|
|||
|
|
max-height: 75vh;
|
|||
|
|
width: 65%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Ensure knowledge modals have proper z-index */
|
|||
|
|
.knowledge-content :deep(.modal-overlay) {
|
|||
|
|
z-index: 1001 !important;
|
|||
|
|
position: fixed !important;
|
|||
|
|
isolation: isolate;
|
|||
|
|
background: rgba(0, 0, 0, 0.4) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.modal-overlay),
|
|||
|
|
.knowledge-content :deep(.modal-content) {
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.modal-overlay) {
|
|||
|
|
backdrop-filter: blur(4px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.pagination) {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: var(--space-xs);
|
|||
|
|
margin-top: var(--space-sm);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.pagination-button) {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
padding: var(--space-xs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.page-info) {
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Link modal overrides */
|
|||
|
|
.knowledge-content :deep(.link-modal) {
|
|||
|
|
max-width: 65vw;
|
|||
|
|
width: 60%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid .knowledge-grid-header),
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid .knowledge-grid-row) {
|
|||
|
|
grid-template-columns: 2fr 0fr 100px;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid .type-cell) {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.source-cell) {
|
|||
|
|
padding-left: var(--space-sm);
|
|||
|
|
white-space: normal;
|
|||
|
|
word-break: break-word;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.action-cell) {
|
|||
|
|
padding-right: var(--space-sm);
|
|||
|
|
text-align: right;
|
|||
|
|
width: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.link-button),
|
|||
|
|
.knowledge-content :deep(.unlink-button) {
|
|||
|
|
min-width: 70px;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid) .action-cell {
|
|||
|
|
display: block !important;
|
|||
|
|
visibility: visible !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid) .link-button,
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid) .unlink-button {
|
|||
|
|
display: inline-block !important;
|
|||
|
|
visibility: visible !important;
|
|||
|
|
opacity: 1 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.knowledge-content :deep(.knowledge-grid-container) {
|
|||
|
|
padding: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.header-actions) {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.action-button) {
|
|||
|
|
font-size: 0.65rem;
|
|||
|
|
padding: 3px 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid .knowledge-grid-header),
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid .knowledge-grid-row) {
|
|||
|
|
grid-template-columns: 2fr 0fr 100px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.knowledge-content :deep(.org-knowledge-grid) .action-cell {
|
|||
|
|
display: block !important;
|
|||
|
|
grid-column: 3 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|