134 lines
3.0 KiB
TypeScript
134 lines
3.0 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { ref, computed } from 'vue'
|
|
|
|
interface HistoryEntry {
|
|
tool: string
|
|
args: any
|
|
timestamp: number
|
|
}
|
|
|
|
interface Notification {
|
|
id: number
|
|
message: string
|
|
type: string
|
|
duration: number
|
|
}
|
|
|
|
interface ConnectionInfo {
|
|
isConnected: boolean
|
|
channel: string | null
|
|
server: string | null
|
|
status: string
|
|
tools: string[]
|
|
prompts: string[]
|
|
resources: string[]
|
|
}
|
|
|
|
export const useCanvasStore = defineStore('canvas', () => {
|
|
// Connection state
|
|
const isConnected = ref(false)
|
|
const isReconnecting = ref(false)
|
|
const connectionStatus = ref<string>('disconnected')
|
|
const connectionError = ref<string | null>(null)
|
|
const connectionInfo = ref<ConnectionInfo | null>(null)
|
|
|
|
const history = ref<HistoryEntry[]>([])
|
|
const notifications = ref<Notification[]>([])
|
|
const showHistoryPanel = ref(false)
|
|
const isAnonymousCanvas = ref(false)
|
|
|
|
let notificationId = 0
|
|
|
|
// Computed
|
|
const statusColor = computed(() => {
|
|
if (isReconnecting.value) return 'warning'
|
|
if (isConnected.value) return 'success'
|
|
if (connectionError.value) return 'error'
|
|
return 'muted'
|
|
})
|
|
|
|
function setConnected(connected: boolean) {
|
|
isConnected.value = connected
|
|
if (connected) {
|
|
isReconnecting.value = false
|
|
connectionError.value = null
|
|
}
|
|
}
|
|
|
|
function setReconnecting(reconnecting: boolean) {
|
|
isReconnecting.value = reconnecting
|
|
}
|
|
|
|
function setConnectionStatus(status: string) {
|
|
connectionStatus.value = status
|
|
}
|
|
|
|
function setConnectionError(error: string | null) {
|
|
connectionError.value = error
|
|
}
|
|
|
|
function setConnectionInfo(info: ConnectionInfo | null) {
|
|
connectionInfo.value = info
|
|
}
|
|
|
|
function addToHistory(entry: HistoryEntry) {
|
|
history.value.unshift(entry)
|
|
// Mantener solo las últimas 100 entradas
|
|
if (history.value.length > 100) {
|
|
history.value = history.value.slice(0, 100)
|
|
}
|
|
}
|
|
|
|
function clearHistory() {
|
|
history.value = []
|
|
}
|
|
|
|
function showNotification(message: string, type: string = 'info', duration: number = 3000) {
|
|
const id = ++notificationId
|
|
const notification: Notification = { id, message, type, duration }
|
|
notifications.value.push(notification)
|
|
|
|
setTimeout(() => {
|
|
removeNotification(id)
|
|
}, duration)
|
|
}
|
|
|
|
function removeNotification(id: number) {
|
|
const index = notifications.value.findIndex(n => n.id === id)
|
|
if (index !== -1) {
|
|
notifications.value.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
function toggleHistoryPanel() {
|
|
showHistoryPanel.value = !showHistoryPanel.value
|
|
}
|
|
|
|
return {
|
|
// Connection state
|
|
isConnected,
|
|
isReconnecting,
|
|
connectionStatus,
|
|
connectionError,
|
|
connectionInfo,
|
|
statusColor,
|
|
// Canvas mode
|
|
isAnonymousCanvas,
|
|
// History & UI
|
|
history,
|
|
notifications,
|
|
showHistoryPanel,
|
|
// Actions
|
|
setConnected,
|
|
setReconnecting,
|
|
setConnectionStatus,
|
|
setConnectionError,
|
|
setConnectionInfo,
|
|
addToHistory,
|
|
clearHistory,
|
|
showNotification,
|
|
removeNotification,
|
|
toggleHistoryPanel
|
|
}
|
|
})
|