asasvirtuais 0.1.0

package/packages/chat/header.tsx

@@ -0,0 +1,118 @@
+'use client'
+import { UpdateForm, useSingle, useTable } from '@/app/module'
+import { ChatHeader, HeaderTitle, HeaderMenu } from '@/packages/chat'
+import { 
+    IconButton, 
+    Menu,
+    Dialog,
+    Button,
+    Text,
+    Portal,
+    Spinner
+} from '@chakra-ui/react'
+import { RiSideBarLine } from 'react-icons/ri'
+import { SettingsDialog } from './settings'
+import { ScenariosDialog } from './scenarios'
+import { useState, useCallback } from 'react'
+
+export default function Header({ onOpenFeed } : { onOpenFeed: () => void }) {
+
+    const { single: chat } = useSingle('chats')
+    const { remove, create } = useTable('chats')
+    const [isDeleting, setIsDeleting] = useState(false)
+
+    const handleNewScenario = useCallback(async () => {
+        try {
+            const newChat = await create.trigger({
+                data: {
+                    name: 'New Chat',
+                    user: 'anonymous'
+                }
+            })
+            window.location.href = `/chat/${newChat.id}`
+        } catch (error) {
+            console.error('Error creating chat:', error)
+        }
+    }, [create])
+
+    const handleDeleteScenario = useCallback(async () => {
+        if (!chat?.id) return
+        
+        setIsDeleting(true)
+        try {
+            await remove.trigger({ id: chat.id })
+            // Use window.location for immediate navigation after delete
+            window.location.href = '/chats'
+        } catch (error) {
+            console.error('Error deleting chat:', error)
+            setIsDeleting(false)
+        }
+    }, [chat?.id, remove])
+
+    return (
+        <ChatHeader>
+            <UpdateForm table='chats' id={chat.id} defaults={{name: chat.name}}>
+                {(props) =>
+                    <HeaderTitle
+                        value={props.fields.name}
+                        defaultValue={chat.name}
+                        onChange={(value) => props.callback({ name: value })} />
+                }
+            </UpdateForm>
+            <IconButton display={{base: 'block', md: 'none'}} onClick={onOpenFeed} variant='plain'>
+                <RiSideBarLine/>
+            </IconButton>
+            <HeaderMenu>
+                <SettingsDialog />
+                <Menu.Separator/>
+                <ScenariosDialog />
+                <Menu.Separator/>
+                <Menu.Item 
+                    value='new-scenario' 
+                    onClick={handleNewScenario}
+                    disabled={create.loading}
+                >
+                    New Scenario 
+                    <Menu.ItemCommand>
+                        {create.loading ? <Spinner size='sm' /> : '➕'}
+                    </Menu.ItemCommand>
+                </Menu.Item>
+                <Menu.Separator/>
+                <Dialog.Root>
+                    <Dialog.Trigger asChild>
+                        <Menu.Item value='delete-scenario' color='red.500'>Delete Scenario <Menu.ItemCommand>❌</Menu.ItemCommand></Menu.Item>
+                    </Dialog.Trigger>
+                    <Portal>
+                        <Dialog.Positioner>
+                            <Dialog.Content>
+                                <Dialog.Header>
+                                    <Dialog.Title>Delete Scenario</Dialog.Title>
+                                    <Dialog.CloseTrigger />
+                                </Dialog.Header>
+                                <Dialog.Body>
+                                    <Text>Are you sure you want to delete "{chat?.name}"?</Text>
+                                    <Text fontSize='sm' color='gray.500' mt={2}>
+                                        This action cannot be undone. All messages in this chat will be permanently deleted.
+                                    </Text>
+                                </Dialog.Body>
+                                <Dialog.Footer>
+                                    <Dialog.ActionTrigger asChild>
+                                        <Button variant='ghost'>Cancel</Button>
+                                    </Dialog.ActionTrigger>
+                                    <Button 
+                                        colorScheme='red' 
+                                        onClick={handleDeleteScenario}
+                                        loading={isDeleting}
+                                        disabled={isDeleting}
+                                    >
+                                        Delete
+                                    </Button>
+                                </Dialog.Footer>
+                            </Dialog.Content>
+                        </Dialog.Positioner>
+                    </Portal>
+                </Dialog.Root>
+            </HeaderMenu>
+        </ChatHeader>
+    )
+}

package/packages/chat/index.ts

@@ -0,0 +1,14 @@
+export * from './components'
+
+// Chat data model components 
+export { default as Messages } from './messages'
+export { ChatMessage } from './message'
+export { EditMessage } from './edit-message'
+export { MessageMenu } from './message-menu'
+export { ToolResults, ToolResult } from './tool-results'
+export { SettingsDialog } from './settings'
+export { ScenariosDialog } from './scenarios'
+export { ModelSelector } from './model-selector'
+export { TemperatureSlider } from './temperature-slider'
+export { default as Header } from './header'
+export { default as Input } from './input'

package/packages/chat/input.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { CreateForm, useSingle, useTable } from '@/app/module'
+import { ChatInput, InputMenu, InputTextarea, InputSend } from '@/packages/chat'
+import { HStack, Menu } from '@chakra-ui/react'
+import { CharactersDialog } from '@/app/chat/[id]/characters-dialog'
+
+interface ChatInputProps {
+  generateResponse: (params: {
+    model?: string
+    system?: string
+    messages: any[]
+    chatId: string
+    temperature?: number
+  }) => Promise<any>
+}
+
+export default function Input({ generateResponse }: ChatInputProps) {
+    const { single: chat } = useSingle('chats')
+    const { array: allMessages, create: createMessage } = useTable('messages')
+    
+    const handleUserMessageSuccess = async (userMessage: Message) => {
+        // Get all messages for this chat to send to AI
+        const chatMessages = allMessages
+            .filter(msg => msg.chat === chat.id)
+            .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
+        
+        const response = await generateResponse({
+            model: chat.model || 'openrouter/auto',
+            temperature: chat.temperature || 1,
+            system: chat.system,
+            chatId: chat.id,
+            messages: [...chatMessages, userMessage]
+        })
+        
+        // Add the response message to the messages table using user timezone
+        await createMessage.trigger({
+            data: {...response.messageData, timestamp: new Date().toISOString()}
+        })
+    }
+    
+    return (
+        <ChatInput>
+            <InputMenu>
+                <CharactersDialog />
+            </InputMenu>
+            <CreateForm 
+                table='messages' 
+                defaults={{role: 'user', chat: chat.id}}
+                onSuccess={handleUserMessageSuccess}
+            >
+                {(props) => (
+                    <HStack w='full' alignItems='flex-end' asChild>
+                        <form onSubmit={async (e) => {
+                            e.preventDefault()
+                            if (!props.fields.content?.trim()) return
+                            
+                            // Store current content to restore if submission fails
+                            const currentContent = props.fields.content
+                            
+                            try {
+                                // Clear content before submission to show immediate feedback
+                                props.setField('content', '')
+                                
+                                // Submit the form using the callback method with timestamp
+                                await props.callback({
+                                    ...props.fields,
+                                    content: currentContent,
+                                    timestamp: new Date().toISOString()
+                                })
+                            } catch (error) {
+                                // Restore content if submission fails
+                                props.setField('content', currentContent)
+                                console.error('Failed to send message:', error)
+                                // You could also show a toast notification here
+                            }
+                        }}>
+                            <InputTextarea
+                                value={props.fields.content}
+                                onChange={e => props.setField('content', e.target.value)}
+                            />
+                            <InputSend loading={props.loading} type='submit' />
+                        </form>
+                    </HStack>
+                )}
+            </CreateForm>
+        </ChatInput>
+    )
+}

package/packages/chat/message-menu.tsx

@@ -0,0 +1,57 @@
+import { useTable } from '@/app/module'
+import { Prose } from '@/packages/chat'
+import { Menu, Box } from '@chakra-ui/react'
+import { LuPen, LuTrash2 } from 'react-icons/lu'
+import ReactMarkdown from 'react-markdown'
+
+export function MessageMenu({
+    message,
+    onOpen,
+    children
+} : {
+    message: Message
+    onOpen: () => void
+    children: string
+}) {
+    const { remove } = useTable('messages')
+    
+    const handleDelete = () => {
+        if (!message) return
+        if (confirm('Are you sure you want to delete this message?')) {
+            remove.trigger({ id: message.id })
+        }
+    }
+    
+    return (
+        <Menu.Root>
+            <Menu.Trigger asChild>
+                <Box cursor="pointer" position="relative" _hover={{ bg: 'gray.50' }} p={2} borderRadius="md">
+                    <Prose fontSize='sm' textAlign='justify'>
+                        <ReactMarkdown>{children}</ReactMarkdown>
+                    </Prose>
+                </Box>
+            </Menu.Trigger>
+            <Menu.Content>
+                <Menu.Item 
+                    value="edit" 
+                    onClick={onOpen}
+                    disabled={remove.loading}
+                >
+                    <LuPen />
+                    Edit message
+                </Menu.Item>
+                <Menu.Item 
+                    value="delete" 
+                    color="red.500"
+                    disabled={remove.loading}
+                    onClick={handleDelete}
+                >
+                    <LuTrash2 />
+                    {remove.loading ? 'Deleting...' : 'Delete message'}
+                </Menu.Item>
+            </Menu.Content>
+        </Menu.Root> 
+    )
+}
+
+export default MessageMenu

package/packages/chat/message.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { Box, Flex, useDisclosure } from '@chakra-ui/react'
+import React from 'react'
+import { EditMessage } from './edit-message'
+import { MessageMenu } from './message-menu'
+import { ToolResults } from './tool-results'
+
+export const ChatMessage = ({ message }: { message: Message }) => {
+  const { open, onOpen, onClose } = useDisclosure()
+  
+  if (!message) return null
+
+  const timestamp = new Date(message.timestamp).toLocaleTimeString()
+
+  if (open)
+    return <EditMessage message={message} onClose={onClose} />
+
+  return (
+    <Box position='relative'>
+      <Box fontSize='xs' w='full' mb={2}>
+        <Flex justifyContent='space-between'>
+          <Box><b>{message.role}</b></Box>
+          <Flex gap={2}>
+            <Box>{message.id}</Box>
+            <Box>{timestamp}</Box>
+          </Flex>
+        </Flex>
+      </Box>
+
+      <Box p={2} borderRadius='md'>
+        <MessageMenu message={message} onOpen={onOpen}>{message.content}</MessageMenu>
+      </Box>
+
+      {/* Render tool results if present */}
+      {message.tools && (
+        <Box mt={2} p={2} borderRadius='md' borderWidth='1px' borderColor='gray.100'>
+          <ToolResults tools={message.tools as Record<string, any>} />
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default ChatMessage

package/packages/chat/messages.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { SingleProvider, UpdateForm, useSingle } from '@/app/module'
+import { ChatMessages } from '@/packages/chat'
+import { parseISO } from 'date-fns'
+import { Editable } from '@chakra-ui/react'
+import { useMemo } from 'react'
+import { ChatMessage } from './message'
+
+export default function Messages({
+    messages
+} : {
+    messages: Message[]
+}) {
+    const { single: chat } = useSingle('chats')
+    const sorted = useMemo(() => {
+        return [...messages].sort((a, b) => {
+            return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+        }).reverse()
+    }, [messages])
+    return (
+        <ChatMessages>
+            {sorted.map(message => (
+                <ChatMessage key={message.id} message={message} />
+            ))}
+            <UpdateForm table='chats' id={chat.id} defaults={{system: chat.system}}>
+                {(props) => {
+                    return (
+                        <Editable.Root
+                            mb='auto'
+                            placeholder='System instructions'
+                            value={props.fields.system}
+                            defaultValue={chat.system}
+                            onValueChange={({value}) => props.setField('system', value)}
+                            onValueCommit={() => props.submit()}
+                        >
+                            <Editable.Preview/>
+                            <Editable.Textarea/>
+                        </Editable.Root>
+                    )
+                }}
+            </UpdateForm>
+        </ChatMessages>
+    )
+}

package/packages/chat/model-selector.tsx

@@ -0,0 +1,172 @@
+'use client'
+import { useState, useMemo } from 'react'
+import { useAsync } from 'react-use'
+import { VStack, Text, Alert, Listbox, HStack, Spinner, createListCollection, Box } from '@chakra-ui/react'
+import { LuCheck } from 'react-icons/lu'
+import type { OpenRouterModel } from '@/hooks/useOpenRouterModels'
+
+// Async function to fetch all models once
+async function fetchAllOpenRouterModels(): Promise<OpenRouterModel[]> {
+  try {
+    const response = await fetch('https://openrouter.ai/api/v1/models', {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch models: ${response.statusText}`)
+    }
+
+    const data = await response.json()
+    
+    // Filter and sort models for better UX
+    const filteredModels = data.data
+      ?.filter((model: any) => {
+        if (!model.id || !model.name) return false
+        if (model.id.includes(':free')) return false // Exclude free models
+        return true
+      })
+      ?.sort((a: any, b: any) => a.name.localeCompare(b.name)) || []
+
+    return filteredModels
+  } catch (err) {
+    console.error('Error fetching OpenRouter models:', err)
+    
+    // Return fallback models on error
+    return [
+      { id: 'openrouter/auto', name: 'Auto (Recommended)' },
+      { id: 'anthropic/claude-3.5-sonnet', name: 'Claude 3.5 Sonnet' },
+      { id: 'openai/gpt-4o', name: 'GPT-4o' },
+      { id: 'openai/gpt-4o-mini', name: 'GPT-4o Mini' },
+      { id: 'google/gemini-pro', name: 'Gemini Pro' },
+      { id: 'meta-llama/llama-3.1-8b-instruct', name: 'Llama 3.1 8B' },
+    ]
+  }
+}
+
+interface ModelSelectorProps {
+  value: string
+  onValueChange: (value: string) => void
+}
+
+export function ModelSelector({ value, onValueChange }: ModelSelectorProps) {
+  const [allModels, setAllModels] = useState<OpenRouterModel[]>([])
+
+  // Load all models once when component mounts
+  const asyncState = useAsync(async () => {
+    const models = await fetchAllOpenRouterModels()
+    setAllModels(models)
+    return models
+  }, [])
+
+  // Create list collection for Listbox
+  const collection = useMemo(() => {
+    return createListCollection({
+      items: allModels.map(model => ({
+        label: model.name,
+        value: model.id,
+        description: model.description,
+        context_length: model.context_length,
+        pricing: model.pricing
+      }))
+    })
+  }, [allModels])
+
+  // Find selected model name
+  const selectedModelName = useMemo(() => {
+    const selected = allModels.find(model => model.id === value)
+    return selected?.name || value || 'Auto (Recommended)'
+  }, [allModels, value])
+
+  return (
+    <VStack align="stretch" gap={2}>
+      <Text fontWeight="medium">Model</Text>
+      <Text fontSize="sm" color="gray.600">
+        {selectedModelName}
+      </Text>
+      
+      {asyncState.error && (
+        <Alert.Root status="warning" size="sm">
+          <Alert.Indicator />
+          <Alert.Description>
+            Failed to load models. Using fallback options.
+          </Alert.Description>
+        </Alert.Root>
+      )}
+
+      {asyncState.loading ? (
+        <HStack justify="center" p={4}>
+          <Spinner size="sm" />
+          <Text>Loading models...</Text>
+        </HStack>
+      ) : (
+        <Box>
+          <Listbox.Root 
+            collection={collection} 
+            value={[value || 'openrouter/auto']}
+            onValueChange={({ value }) => {
+              if (value[0]) {
+                onValueChange(value[0])
+              }
+            }}
+          >
+            <Listbox.Label fontSize="sm" fontWeight="medium" mb={2}>
+              Select AI Model
+            </Listbox.Label>
+            <Listbox.Content 
+              maxH="300px" 
+              overflowY="auto"
+              overflowX="hidden"
+              borderWidth="1px"
+              borderRadius="md"
+              p={1}
+            >
+              {collection.items.map((model) => (
+                <Listbox.Item 
+                  key={model.value} 
+                  item={model}
+                  p={3}
+                  borderRadius="sm"
+                  _hover={{ bg: "gray.50" }}
+                  _selected={{ bg: "blue.50", borderColor: "blue.300", borderWidth: "1px" }}
+                >
+                  <HStack justify="space-between" align="start">
+                    <VStack align="start" gap={1} flex={1}>
+                      <Text fontWeight="medium" fontSize="sm">
+                        {model.label}
+                      </Text>
+                      {model.description && (
+                        <Text fontSize="xs" color="gray.600">
+                          {model.description}
+                        </Text>
+                      )}
+                      {model.context_length && (
+                        <Text fontSize="xs" color="gray.500">
+                          Context: {model.context_length.toLocaleString()} tokens
+                        </Text>
+                      )}
+                      {model.pricing && (
+                        <HStack fontSize="xs" color="gray.500" gap={3}>
+                          {model.pricing.prompt && (
+                            <Text>Input: ${model.pricing.prompt}/1M tokens</Text>
+                          )}
+                          {model.pricing.completion && (
+                            <Text>Output: ${model.pricing.completion}/1M tokens</Text>
+                          )}
+                        </HStack>
+                      )}
+                    </VStack>
+                    <Listbox.ItemIndicator>
+                      <LuCheck />
+                    </Listbox.ItemIndicator>
+                  </HStack>
+                </Listbox.Item>
+              ))}
+            </Listbox.Content>
+          </Listbox.Root>
+        </Box>
+      )}
+    </VStack>
+  )
+}

package/packages/chat/scenarios.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import React, { useState } from 'react'
+import { 
+    Button,
+    Dialog,
+    Menu,
+    VStack,
+    HStack,
+    Portal} from '@chakra-ui/react'
+import { LuCheck } from 'react-icons/lu'
+import { useRouter } from 'next/navigation'
+import { CreateChatButton } from '@/app/chats/create-chat-button'
+import { ChatsList } from '@/app/chats/chats-list'
+
+export interface CharactersDialogProps {
+  onClose?: () => void
+}
+
+interface ScenariosDialogProps {
+  onClose?: () => void
+}
+
+export function ScenariosDialog({ onClose }: ScenariosDialogProps) {
+    const router = useRouter()
+    const [open, setOpen] = useState(false)
+
+    const handleChatSelect = (chatId: string) => {
+        router.push(`/chat/${chatId}`)
+        setOpen(false)
+        onClose?.()
+    }
+
+    return (
+        <Dialog.Root open={open} onOpenChange={(e) => setOpen(e.open)}>
+            <Dialog.Trigger asChild>
+                <Menu.Item value='scenarios'>My Scenarios <Menu.ItemCommand>🎭</Menu.ItemCommand></Menu.Item>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Positioner>
+                  <Dialog.Backdrop/>
+                    <Dialog.Content maxW='container.sm'>
+                        <Dialog.Header>
+                            <Dialog.Title>My Scenarios</Dialog.Title>
+                            <Dialog.CloseTrigger />
+                        </Dialog.Header>
+                        <Dialog.Body>
+                            <VStack gap={4} align='stretch'>
+                                <HStack justify='end'>
+                                    <CreateChatButton />
+                                </HStack>
+                                <ChatsList 
+                                    onChatSelect={handleChatSelect} 
+                                    showDeleteButton={true}
+                                />
+                            </VStack>
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant='ghost'>Close</Button>
+                            </Dialog.ActionTrigger>
+                        </Dialog.Footer>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    )
+}