refactor: convert project from JavaScript to TypeScript and switch to pnpm

- Convert all .js/.jsx files to .ts/.tsx
- Add TypeScript configuration (tsconfig.json, tsconfig.node.json)
- Update vite.config.js to vite.config.ts
- Add TypeScript type definitions (@types/react, @types/react-dom, @types/node)
- Replace npm with pnpm (pnpm-lock.yaml)
- Add model configuration option for LLM API
- Update package.json scripts for TypeScript build
- All 52 tests passing
This commit is contained in:
2026-02-26 01:35:33 +01:00
parent 5667199d15
commit 7928fc1f00
21 changed files with 3680 additions and 5680 deletions
+1 -1
View File
@@ -8,6 +8,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
-5513
View File
File diff suppressed because it is too large Load Diff
+7 -4
View File
@@ -1,15 +1,15 @@
{
"name": "light-chat",
"version": "0.1.0",
"description": "Lightweight chat app for connecting to LLM APIs",
"version": "1.0.0",
"description": "Lightweight chat app for connecting to LLM APIs - TypeScript + pnpm",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "vitest run",
"test:watch": "vitest",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0"
"type-check": "tsc --noEmit"
},
"dependencies": {
"@capacitor/android": "^5.0.0",
@@ -22,6 +22,9 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.0",
"@types/node": "^25.3.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^4.0.0",
"jsdom": "^22.0.0",
"typescript": "^5.9.3",
+3352
View File
File diff suppressed because it is too large Load Diff
+8 -6
View File
@@ -1,14 +1,14 @@
import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import App from './App.jsx'
import { render, screen, waitFor } from '@testing-library/react'
import App from './App'
// Mock only the components, not the hook
vi.mock('./components/ChatWindow.jsx', () => ({
vi.mock('./components/ChatWindow', () => ({
ChatWindow: () => <div data-testid="chat-window">ChatWindow Mock</div>
}))
vi.mock('./components/SessionDrawer.jsx', () => ({
SessionDrawer: ({ isOpen }) => isOpen ? <div data-testid="session-drawer">SessionDrawer Mock</div> : null
vi.mock('./components/SessionDrawer', () => ({
SessionDrawer: ({ isOpen }: { isOpen: boolean }) => isOpen ? <div data-testid="session-drawer">SessionDrawer Mock</div> : null
}))
describe('App', () => {
@@ -31,7 +31,9 @@ describe('App', () => {
expect(screen.getByTestId('chat-window')).toBeInTheDocument()
})
fireEvent.click(screen.getByTitle(/Open Menu/i))
await waitFor(() => {
screen.getByTitle(/Open Menu/i).click()
})
await waitFor(() => {
expect(screen.getByTestId('session-drawer')).toBeInTheDocument()
+3 -3
View File
@@ -1,7 +1,7 @@
import { useSessions } from './hooks/useSessions'
import { ChatWindow } from './components/ChatWindow'
import { SessionDrawer } from './components/SessionDrawer'
import { useState } from 'react'
import { useSessions } from './hooks/useSessions.js'
import { ChatWindow } from './components/ChatWindow.jsx'
import { SessionDrawer } from './components/SessionDrawer.jsx'
/**
* Main App Component
@@ -1,11 +1,12 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { render, screen, waitFor, act } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { ChatWindow } from '../components/ChatWindow.jsx'
import { sendMessage } from '../utils/llmApi.js'
import { ChatWindow } from './ChatWindow'
import { sendMessage } from '../utils/llmApi'
import type { Session, Config } from '../services/sessionService'
// Mock the llmApi module
vi.mock('../utils/llmApi.js', () => ({
vi.mock('../utils/llmApi', () => ({
sendMessage: vi.fn(),
testConnection: vi.fn()
}))
@@ -15,12 +16,17 @@ describe('ChatWindow', () => {
session: {
id: '1',
name: 'Test Session',
messages: []
},
messages: [],
endpoint: '',
systemPrompt: '',
createdAt: Date.now(),
updatedAt: Date.now()
} as Session,
config: {
endpoint: 'https://api.test.com',
systemPrompt: 'You are helpful'
},
systemPrompt: 'You are helpful',
model: 'local-swarm'
} as Config,
onAddMessage: vi.fn()
}
@@ -44,8 +50,8 @@ describe('ChatWindow', () => {
const sessionWithMessages = {
...defaultProps.session,
messages: [
{ role: 'user', content: 'Hello' },
{ role: 'assistant', content: 'Hi there!' }
{ role: 'user' as const, content: 'Hello' },
{ role: 'assistant' as const, content: 'Hi there!' }
]
}
@@ -57,7 +63,7 @@ describe('ChatWindow', () => {
it('should handle form submission', async () => {
const user = userEvent.setup()
sendMessage.mockResolvedValueOnce('Response')
vi.mocked(sendMessage).mockResolvedValueOnce('Response')
render(<ChatWindow {...defaultProps} />)
@@ -78,7 +84,7 @@ describe('ChatWindow', () => {
const user = userEvent.setup()
const noEndpointProps = {
...defaultProps,
config: { endpoint: '', systemPrompt: '' }
config: { endpoint: '', systemPrompt: '', model: 'local-swarm' } as Config
}
render(<ChatWindow {...noEndpointProps} />)
@@ -1,14 +1,21 @@
import { useState, useRef, useEffect } from 'react'
import { sendMessage } from '../utils/llmApi.js'
import { sendMessage } from '../utils/llmApi'
import type { Session, Config } from '../services/sessionService'
interface ChatWindowProps {
session: Session | null
config: Config
onAddMessage: (role: 'user' | 'assistant', content: string) => void
}
/**
* ChatWindow - Main chat interface
*/
export function ChatWindow({ session, config, onAddMessage }) {
export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) {
const [input, setInput] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState(null)
const messagesEndRef = useRef(null)
const [error, setError] = useState<string | null>(null)
const messagesEndRef = useRef<HTMLDivElement>(null)
const scrollToBottom = () => {
if (messagesEndRef.current && typeof messagesEndRef.current.scrollIntoView === 'function') {
@@ -20,7 +27,7 @@ export function ChatWindow({ session, config, onAddMessage }) {
scrollToBottom()
}, [session?.messages])
const handleSubmit = async (e) => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!input.trim() || isLoading) return
@@ -45,13 +52,14 @@ export function ChatWindow({ session, config, onAddMessage }) {
config.endpoint,
userMessage,
apiMessages,
config.systemPrompt
config.systemPrompt,
config.model || 'local-swarm'
)
// Add assistant response
onAddMessage('assistant', response)
} catch (err) {
setError(err.message || 'Failed to get response')
setError(err instanceof Error ? err.message : 'Failed to get response')
} finally {
setIsLoading(false)
}
@@ -1,17 +1,18 @@
import { describe, it, expect, vi, afterEach } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { SessionDrawer } from '../components/SessionDrawer.jsx'
import { SessionDrawer } from './SessionDrawer'
import type { Session, Config } from '../services/sessionService'
describe('SessionDrawer', () => {
const defaultProps = {
isOpen: true,
onClose: vi.fn(),
sessions: [],
sessions: [] as Session[],
currentSessionId: null,
onSelectSession: vi.fn(),
onCreateSession: vi.fn(),
onDeleteSession: vi.fn(),
config: { endpoint: '', systemPrompt: '' },
config: { endpoint: '', systemPrompt: '', model: 'local-swarm' } as Config,
onUpdateConfig: vi.fn()
}
@@ -29,15 +30,16 @@ describe('SessionDrawer', () => {
render(<SessionDrawer {...defaultProps} />)
const overlay = document.querySelector('[style*="position: fixed"]')
if (overlay) {
fireEvent.click(overlay)
expect(defaultProps.onClose).toHaveBeenCalled()
}
})
it('should display sessions list', () => {
const sessions = [
{ id: '1', name: 'Session 1', messages: [] },
{ id: '2', name: 'Session 2', messages: [] }
const sessions: Session[] = [
{ id: '1', name: 'Session 1', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() },
{ id: '2', name: 'Session 2', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
render(<SessionDrawer {...defaultProps} sessions={sessions} currentSessionId="1" />)
@@ -46,7 +48,9 @@ describe('SessionDrawer', () => {
})
it('should call onSelectSession when session clicked', () => {
const sessions = [{ id: '1', name: 'Session 1', messages: [] }]
const sessions: Session[] = [
{ id: '1', name: 'Session 1', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
render(<SessionDrawer {...defaultProps} sessions={sessions} />)
fireEvent.click(screen.getByText('Session 1'))
@@ -72,6 +76,6 @@ describe('SessionDrawer', () => {
fireEvent.click(screen.getByRole('button', { name: /Save Config/i }))
expect(defaultProps.onUpdateConfig).toHaveBeenCalledWith({ endpoint: 'https://new.com', systemPrompt: '' })
expect(defaultProps.onUpdateConfig).toHaveBeenCalledWith({ endpoint: 'https://new.com', systemPrompt: '', model: 'local-swarm' })
})
})
@@ -1,4 +1,17 @@
import { useState } from 'react'
import type { Session, Config } from '../services/sessionService'
interface SessionDrawerProps {
isOpen: boolean
onClose: () => void
sessions: Session[]
currentSessionId: string | null
onSelectSession: (sessionId: string) => void
onCreateSession: () => void
onDeleteSession: (sessionId: string) => void
config: Config
onUpdateConfig: (config: Partial<Config>) => void
}
/**
* SessionDrawer - Sidebar showing sessions list and config
@@ -13,10 +26,10 @@ export function SessionDrawer({
onDeleteSession,
config,
onUpdateConfig
}) {
const [localConfig, setLocalConfig] = useState(config)
}: SessionDrawerProps) {
const [localConfig, setLocalConfig] = useState<Config>(config)
const handleConfigChange = (field, value) => {
const handleConfigChange = (field: keyof Config, value: string) => {
setLocalConfig(prev => ({ ...prev, [field]: value }))
}
@@ -24,7 +37,7 @@ export function SessionDrawer({
onUpdateConfig(localConfig)
}
const handleKeyDown = (e) => {
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Escape') {
onClose()
}
@@ -97,6 +110,17 @@ export function SessionDrawer({
placeholder="https://api.openai.com/v1/chat/completions"
/>
</div>
<div style={{ marginBottom: '12px' }}>
<label style={{ display: 'block', marginBottom: '4px', fontSize: '12px' }}>
Model
</label>
<input
type="text"
value={localConfig.model || 'local-swarm'}
onChange={(e) => handleConfigChange('model', e.target.value)}
placeholder="local-swarm"
/>
</div>
<div style={{ marginBottom: '12px' }}>
<label style={{ display: 'block', marginBottom: '4px', fontSize: '12px' }}>
System Prompt
@@ -1,11 +1,10 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { renderHook, act } from '@testing-library/react'
import { useSessions } from '../hooks/useSessions.js'
import * as sessionService from '../services/sessionService.js'
import { useSessions } from './useSessions'
// Mock localStorage
const localStorageMock = (() => {
let store = {}
let store: Record<string, string> = {}
return {
getItem: vi.fn((key) => store[key] || null),
setItem: vi.fn((key, value) => { store[key] = value }),
@@ -25,9 +24,9 @@ describe('useSessions', () => {
describe('initialization', () => {
it('should load sessions and config from localStorage on mount', () => {
const sessions = [
{ id: '1', name: 'Session 1', messages: [], endpoint: '', systemPrompt: '' }
{ id: '1', name: 'Session 1', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
const config = { endpoint: 'https://api.test.com', systemPrompt: 'Be helpful' }
const config = { endpoint: 'https://api.test.com', systemPrompt: 'Be helpful', model: 'local-swarm' }
localStorageMock.getItem.mockImplementation((key) => {
if (key === 'light-chat-sessions') return JSON.stringify(sessions)
@@ -44,8 +43,8 @@ describe('useSessions', () => {
it('should set first session as current when available', () => {
const sessions = [
{ id: '1', name: 'Session 1', messages: [] },
{ id: '2', name: 'Session 2', messages: [] }
{ id: '1', name: 'Session 1', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() },
{ id: '2', name: 'Session 2', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
localStorageMock.getItem.mockImplementation((key) => {
if (key === 'light-chat-sessions') return JSON.stringify(sessions)
@@ -55,7 +54,7 @@ describe('useSessions', () => {
const { result } = renderHook(() => useSessions())
expect(result.current.currentSessionId).toBe('1')
expect(result.current.currentSession.id).toBe('1')
expect(result.current.currentSession!.id).toBe('1')
})
it('should not set current session when no sessions exist', () => {
@@ -99,8 +98,8 @@ describe('useSessions', () => {
describe('removeSession', () => {
it('should remove session and update current session', () => {
const sessions = [
{ id: '1', name: 'Session 1', messages: [] },
{ id: '2', name: 'Session 2', messages: [] }
{ id: '1', name: 'Session 1', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() },
{ id: '2', name: 'Session 2', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
localStorageMock.getItem.mockImplementation((key) => {
if (key === 'light-chat-sessions') return JSON.stringify(sessions)
@@ -120,7 +119,7 @@ describe('useSessions', () => {
it('should clear current session if deleted session was current and no others exist', () => {
const sessions = [
{ id: '1', name: 'Session 1', messages: [] }
{ id: '1', name: 'Session 1', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
localStorageMock.getItem.mockImplementation((key) => {
if (key === 'light-chat-sessions') return JSON.stringify(sessions)
@@ -144,6 +143,8 @@ describe('useSessions', () => {
id: '1',
name: 'Session 1',
messages: [],
endpoint: '',
systemPrompt: '',
createdAt: Date.now(),
updatedAt: Date.now()
}
@@ -158,8 +159,8 @@ describe('useSessions', () => {
result.current.addMessage('user', 'Hello')
})
expect(result.current.currentSession.messages).toHaveLength(1)
expect(result.current.currentSession.messages[0]).toEqual({ role: 'user', content: 'Hello' })
expect(result.current.currentSession!.messages).toHaveLength(1)
expect(result.current.currentSession!.messages[0]).toEqual({ role: 'user', content: 'Hello' })
})
it('should not add message if no current session', () => {
@@ -1,14 +1,14 @@
import { useState, useEffect, useCallback } from 'react'
import * as sessionService from '../services/sessionService.js'
import * as sessionService from '../services/sessionService'
/**
* Custom hook for managing chat sessions
* Provides reactive state management following AGENTS.md guidelines
*/
export function useSessions() {
const [sessions, setSessions] = useState([])
const [currentSessionId, setCurrentSessionId] = useState(null)
const [config, setConfig] = useState({ endpoint: '', systemPrompt: '' })
const [sessions, setSessions] = useState<sessionService.Session[]>([])
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
const [config, setConfig] = useState<sessionService.Config>({ endpoint: '', systemPrompt: '', model: 'local-swarm' })
const [isLoading, setIsLoading] = useState(true)
// Load data on mount
@@ -42,7 +42,10 @@ export function useSessions() {
/**
* Create a new session
*/
const createSession = useCallback((endpoint = config.endpoint, systemPrompt = config.systemPrompt) => {
const createSession = useCallback((
endpoint: string = config.endpoint,
systemPrompt: string = config.systemPrompt
) => {
const newSession = sessionService.addSession({ endpoint, systemPrompt })
setSessions(prev => [...prev, newSession])
setCurrentSessionId(newSession.id)
@@ -52,7 +55,7 @@ export function useSessions() {
/**
* Delete a session
*/
const removeSession = useCallback((sessionId) => {
const removeSession = useCallback((sessionId: string) => {
const success = sessionService.deleteSession(sessionId)
if (success) {
setSessions(prev => prev.filter(s => s.id !== sessionId))
@@ -67,7 +70,7 @@ export function useSessions() {
/**
* Update a session
*/
const updateSession = useCallback((sessionId, updates) => {
const updateSession = useCallback((sessionId: string, updates: Partial<sessionService.Session>) => {
const updated = sessionService.updateSession(sessionId, updates)
if (updated) {
setSessions(prev => prev.map(s => s.id === sessionId ? updated : s))
@@ -83,10 +86,10 @@ export function useSessions() {
/**
* Add message to current session
*/
const addMessage = useCallback((role, content) => {
const addMessage = useCallback((role: 'user' | 'assistant', content: string) => {
if (!currentSessionId) return null
const message = { role, content }
const message: sessionService.Message = { role, content }
const updated = sessionService.addMessage(currentSessionId, message)
if (updated) {
@@ -99,7 +102,7 @@ export function useSessions() {
/**
* Update config
*/
const updateConfig = useCallback((updates) => {
const updateConfig = useCallback((updates: Partial<sessionService.Config>) => {
setConfig(prev => ({ ...prev, ...updates }))
}, [])
+2 -2
View File
@@ -1,9 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
@@ -1,9 +1,10 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import * as sessionService from '../services/sessionService.js'
import * as sessionService from './sessionService'
import type { Session } from './sessionService'
// Mock localStorage
const localStorageMock = (() => {
let store = {}
let store: Record<string, string> = {}
return {
getItem: vi.fn((key) => store[key] || null),
setItem: vi.fn((key, value) => { store[key] = value }),
@@ -27,8 +28,8 @@ describe('Session Service', () => {
})
it('should return parsed sessions from localStorage', () => {
const testSessions = [
{ id: '1', name: 'Test', messages: [], createdAt: Date.now(), updatedAt: Date.now() }
const testSessions: Session[] = [
{ id: '1', name: 'Test', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(testSessions))
@@ -45,7 +46,7 @@ describe('Session Service', () => {
describe('saveSessions', () => {
it('should save sessions to localStorage', () => {
const sessions = [{ id: '1', name: 'Test' }]
const sessions = [{ id: '1', name: 'Test', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }]
sessionService.saveSessions(sessions)
expect(localStorageMock.setItem).toHaveBeenCalledWith(
'light-chat-sessions',
@@ -57,14 +58,14 @@ describe('Session Service', () => {
localStorageMock.setItem.mockImplementationOnce(() => {
throw new Error('Storage full')
})
expect(() => sessionService.saveSessions([{ id: '1' }])).not.toThrow()
expect(() => sessionService.saveSessions([{ id: '1', name: 'Test', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }])).not.toThrow()
})
})
describe('loadConfig', () => {
it('should return default config when no data exists', () => {
const config = sessionService.loadConfig()
expect(config).toEqual({ endpoint: '', systemPrompt: '' })
expect(config).toEqual({ endpoint: '', systemPrompt: '', model: 'local-swarm' })
})
it('should return parsed config from localStorage', () => {
@@ -72,13 +73,13 @@ describe('Session Service', () => {
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(testConfig))
const config = sessionService.loadConfig()
expect(config).toEqual(testConfig)
expect(config).toEqual({ ...testConfig, model: 'local-swarm' })
})
})
describe('saveConfig', () => {
it('should save config to localStorage', () => {
const config = { endpoint: 'https://api.test.com', systemPrompt: 'Be helpful' }
const config = { endpoint: 'https://api.test.com', systemPrompt: 'Be helpful', model: 'local-swarm' }
sessionService.saveConfig(config)
expect(localStorageMock.setItem).toHaveBeenCalledWith(
'light-chat-config',
@@ -111,15 +112,15 @@ describe('Session Service', () => {
describe('deleteSession', () => {
it('should return false when session not found', () => {
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify([{ id: 'other' }]))
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify([{ id: 'other', name: 'Test', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }]))
const result = sessionService.deleteSession('nonexistent')
expect(result).toBe(false)
})
it('should delete session and return true', () => {
const sessions = [
{ id: '1', name: 'Test 1', messages: [], createdAt: Date.now(), updatedAt: Date.now() },
{ id: '2', name: 'Test 2', messages: [], createdAt: Date.now(), updatedAt: Date.now() }
const sessions: Session[] = [
{ id: '1', name: 'Test 1', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() },
{ id: '2', name: 'Test 2', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(sessions))
@@ -136,10 +137,12 @@ describe('Session Service', () => {
})
it('should update session and return updated session', () => {
const existing = {
const existing: Session = {
id: '1',
name: 'Old',
messages: [],
endpoint: '',
systemPrompt: '',
createdAt: Date.now(),
updatedAt: Date.now()
}
@@ -147,16 +150,18 @@ describe('Session Service', () => {
const result = sessionService.updateSession('1', { name: 'New' })
expect(result.name).toBe('New')
expect(result.id).toBe('1')
expect(result.messages).toEqual([])
expect(result!.name).toBe('New')
expect(result!.id).toBe('1')
expect(result!.messages).toEqual([])
})
it('should update updatedAt timestamp', () => {
const existing = {
const existing: Session = {
id: '1',
name: 'Test',
messages: [],
endpoint: '',
systemPrompt: '',
createdAt: Date.now(),
updatedAt: Date.now()
}
@@ -168,7 +173,7 @@ describe('Session Service', () => {
const result = sessionService.updateSession('1', { name: 'New' })
expect(result.updatedAt).toBeGreaterThan(beforeUpdate)
expect(result!.updatedAt).toBeGreaterThan(beforeUpdate)
vi.useRealTimers()
})
})
@@ -181,23 +186,25 @@ describe('Session Service', () => {
})
it('should return session when found', () => {
const sessions = [
{ id: '1', name: 'Test' },
{ id: '2', name: 'Test 2' }
const sessions: Session[] = [
{ id: '1', name: 'Test', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() },
{ id: '2', name: 'Test 2', messages: [], endpoint: '', systemPrompt: '', createdAt: Date.now(), updatedAt: Date.now() }
]
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(sessions))
const session = sessionService.getSession('2')
expect(session.name).toBe('Test 2')
expect(session!.name).toBe('Test 2')
})
})
describe('addMessage', () => {
it('should add message to session', () => {
const session = {
const session: Session = {
id: '1',
name: 'Test',
messages: [],
endpoint: '',
systemPrompt: '',
createdAt: Date.now(),
updatedAt: Date.now()
}
@@ -205,8 +212,8 @@ describe('Session Service', () => {
const result = sessionService.addMessage('1', { role: 'user', content: 'Hello' })
expect(result.messages).toHaveLength(1)
expect(result.messages[0]).toEqual({ role: 'user', content: 'Hello' })
expect(result!.messages).toHaveLength(1)
expect(result!.messages[0]).toEqual({ role: 'user', content: 'Hello' })
})
it('should return null for nonexistent session', () => {
@@ -6,18 +6,44 @@
const STORAGE_KEY = 'light-chat-sessions'
const CONFIG_KEY = 'light-chat-config'
export interface Message {
role: 'user' | 'assistant'
content: string
}
export interface Session {
id: string
name: string
endpoint: string
systemPrompt: string
messages: Message[]
createdAt: number
updatedAt: number
}
export interface Config {
endpoint: string
systemPrompt: string
model: string
}
interface CreateSessionOptions {
endpoint?: string
systemPrompt?: string
}
/**
* Generate unique session ID
* @returns {string}
*/
function generateId() {
return Date.now().toString(36) + Math.random().toString(36).substr(2)
function generateId(): string {
return Date.now().toString(36) + Math.random().toString(36).substring(2)
}
/**
* Default session structure
*/
function createSession(endpoint = '', systemPrompt = '') {
function createSession(endpoint: string = '', systemPrompt: string = ''): Session {
return {
id: generateId(),
name: `Session ${new Date().toLocaleTimeString()}`,
@@ -33,7 +59,7 @@ function createSession(endpoint = '', systemPrompt = '') {
* Load all sessions from storage
* @returns {Array}
*/
export function loadSessions() {
export function loadSessions(): Session[] {
try {
const data = localStorage.getItem(STORAGE_KEY)
return data ? JSON.parse(data) : []
@@ -45,9 +71,9 @@ export function loadSessions() {
/**
* Save sessions to storage
* @param {Array} sessions
* @param sessions
*/
export function saveSessions(sessions) {
export function saveSessions(sessions: Session[]): void {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(sessions))
} catch (error) {
@@ -57,23 +83,23 @@ export function saveSessions(sessions) {
/**
* Load API configuration
* @returns {Object} { endpoint, systemPrompt }
* @returns {Config}
*/
export function loadConfig() {
export function loadConfig(): Config {
try {
const data = localStorage.getItem(CONFIG_KEY)
return data ? JSON.parse(data) : { endpoint: '', systemPrompt: '' }
return data ? { ...JSON.parse(data), model: 'local-swarm' } : { endpoint: '', systemPrompt: '', model: 'local-swarm' }
} catch (error) {
console.error('Failed to load config:', error)
return { endpoint: '', systemPrompt: '' }
return { endpoint: '', systemPrompt: '', model: 'local-swarm' }
}
}
/**
* Save API configuration
* @param {Object} config
* @param config
*/
export function saveConfig(config) {
export function saveConfig(config: Config): void {
try {
localStorage.setItem(CONFIG_KEY, JSON.stringify(config))
} catch (error) {
@@ -83,10 +109,10 @@ export function saveConfig(config) {
/**
* Add a new session
* @param {Object} options
* @returns {Object} new session
* @param options
* @returns new session
*/
export function addSession(options = {}) {
export function addSession(options: CreateSessionOptions = {}): Session {
const sessions = loadSessions()
const newSession = createSession(
options.endpoint,
@@ -99,10 +125,10 @@ export function addSession(options = {}) {
/**
* Delete a session
* @param {string} sessionId
* @returns {boolean}
* @param sessionId
* @returns
*/
export function deleteSession(sessionId) {
export function deleteSession(sessionId: string): boolean {
const sessions = loadSessions()
const filtered = sessions.filter(s => s.id !== sessionId)
if (filtered.length === sessions.length) {
@@ -114,11 +140,11 @@ export function deleteSession(sessionId) {
/**
* Update a session
* @param {string} sessionId
* @param {Object} updates
* @returns {Object|null} updated session or null
* @param sessionId
* @param updates
* @returns updated session or null
*/
export function updateSession(sessionId, updates) {
export function updateSession(sessionId: string, updates: Partial<Session>): Session | null {
const sessions = loadSessions()
const index = sessions.findIndex(s => s.id === sessionId)
@@ -143,21 +169,21 @@ export function updateSession(sessionId, updates) {
/**
* Get a specific session
* @param {string} sessionId
* @returns {Object|null}
* @param sessionId
* @returns
*/
export function getSession(sessionId) {
export function getSession(sessionId: string): Session | null {
const sessions = loadSessions()
return sessions.find(s => s.id === sessionId) || null
}
/**
* Add message to a session
* @param {string} sessionId
* @param {Object} message - { role: 'user'|'assistant', content: string }
* @returns {Object|null} updated session
* @param sessionId
* @param message - { role: 'user'|'assistant', content: string }
* @returns updated session
*/
export function addMessage(sessionId, message) {
export function addMessage(sessionId: string, message: Message): Session | null {
const session = getSession(sessionId)
if (!session) {
@@ -9,3 +9,9 @@ global.ResizeObserver = class ResizeObserver {
unobserve() {}
disconnect() {}
}
declare global {
interface Window {
ResizeObserver: typeof ResizeObserver
}
}
@@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { sendMessage, testConnection } from '../utils/llmApi.js'
import { sendMessage, testConnection } from './llmApi'
describe('LLM API', () => {
beforeEach(() => {
@@ -19,7 +19,7 @@ describe('LLM API', () => {
choices: [{ message: { content: 'Hello there!' } }]
})
})
)
) as any
const result = await sendMessage('https://api.example.com/chat', 'Hi')
@@ -39,14 +39,14 @@ describe('LLM API', () => {
ok: true,
json: () => Promise.resolve({ choices: [] })
})
)
) as any
await expect(sendMessage('https://api.example.com/chat', 'Hi'))
.rejects.toThrow('Invalid response format: no content found')
})
it('should throw error on network failure', async () => {
global.fetch = vi.fn(() => Promise.reject(new Error('Network error')))
global.fetch = vi.fn(() => Promise.reject(new Error('Network error'))) as any
await expect(sendMessage('https://api.example.com/chat', 'Hi'))
.rejects.toThrow('Network error')
@@ -60,12 +60,13 @@ describe('LLM API', () => {
choices: [{ message: { content: 'Response' } }]
})
})
)
) as any
await sendMessage('https://api.example.com/chat', 'Hi', [], 'You are helpful')
await sendMessage('https://api.example.com/chat', 'Hi', [], 'You are helpful', 'local-swarm')
const callBody = JSON.parse(global.fetch.mock.calls[0][1].body)
const callBody = JSON.parse((global.fetch as any).mock.calls[0][1].body)
expect(callBody.messages[0]).toEqual({ role: 'system', content: 'You are helpful' })
expect(callBody.model).toBe('local-swarm')
})
it('should include message history', async () => {
@@ -76,7 +77,7 @@ describe('LLM API', () => {
choices: [{ message: { content: 'Response' } }]
})
})
)
) as any
const history = [
{ role: 'user', content: 'Hello' },
@@ -85,7 +86,7 @@ describe('LLM API', () => {
await sendMessage('https://api.example.com/chat', 'How are you?', history)
const callBody = JSON.parse(global.fetch.mock.calls[0][1].body)
const callBody = JSON.parse((global.fetch as any).mock.calls[0][1].body)
expect(callBody.messages[0]).toEqual({ role: 'user', content: 'Hello' })
expect(callBody.messages[1]).toEqual({ role: 'assistant', content: 'Hi there!' })
expect(callBody.messages[2]).toEqual({ role: 'user', content: 'How are you?' })
@@ -96,7 +97,7 @@ describe('LLM API', () => {
it('should return true on successful response', async () => {
global.fetch = vi.fn(() =>
Promise.resolve({ status: 200 })
)
) as any
const result = await testConnection('https://api.example.com/chat')
expect(result).toBe(true)
@@ -105,7 +106,7 @@ describe('LLM API', () => {
it('should return true on error response (not 404)', async () => {
global.fetch = vi.fn(() =>
Promise.resolve({ status: 401 })
)
) as any
const result = await testConnection('https://api.example.com/chat')
expect(result).toBe(true)
@@ -114,14 +115,14 @@ describe('LLM API', () => {
it('should return false on 404', async () => {
global.fetch = vi.fn(() =>
Promise.resolve({ status: 404 })
)
) as any
const result = await testConnection('https://api.example.com/chat')
expect(result).toBe(false)
})
it('should return false on network error', async () => {
global.fetch = vi.fn(() => Promise.reject(new Error('Network error')))
global.fetch = vi.fn(() => Promise.reject(new Error('Network error'))) as any
const result = await testConnection('https://api.example.com/chat')
expect(result).toBe(false)
+34 -13
View File
@@ -3,25 +3,45 @@
* Simple wrapper for OpenAI-compatible APIs
*/
interface Message {
role: string
content: string
}
interface APIResponse {
choices: Array<{
message: {
content: string
}
}>
}
const DEFAULT_HEADERS = {
'Content-Type': 'application/json',
}
/**
* Send a message to the LLM API and get a response
* @param {string} endpoint - API endpoint URL
* @param {string} message - User message
* @param {Array} messages - Full message history (optional, for multi-turn)
* @param {string} systemPrompt - System prompt (optional)
* @returns {Promise<string>} - LLM response content
* @param endpoint - API endpoint URL
* @param message - User message
* @param messages - Full message history (optional, for multi-turn)
* @param systemPrompt - System prompt (optional)
* @param model - Model name (optional, defaults to 'local-swarm')
* @returns - LLM response content
*/
export async function sendMessage(endpoint, message, messages = [], systemPrompt = '') {
export async function sendMessage(
endpoint: string,
message: string,
messages: Message[] = [],
systemPrompt: string = '',
model: string = 'local-swarm'
): Promise<string> {
if (!endpoint) {
throw new Error('API endpoint is required')
}
// Build messages array for API
const apiMessages = []
const apiMessages: Array<{ role: string; content: string }> = []
if (systemPrompt) {
apiMessages.push({ role: 'system', content: systemPrompt })
@@ -43,7 +63,7 @@ export async function sendMessage(endpoint, message, messages = [], systemPrompt
method: 'POST',
headers: DEFAULT_HEADERS,
body: JSON.stringify({
model: 'gpt-3.5-turbo', // or appropriate model
model,
messages: apiMessages,
stream: false
})
@@ -54,7 +74,7 @@ export async function sendMessage(endpoint, message, messages = [], systemPrompt
throw new Error(`API request failed: ${response.status} - ${errorText}`)
}
const data = await response.json()
const data = (await response.json()) as APIResponse
// Extract content from response (OpenAI format)
const content = data.choices?.[0]?.message?.content
@@ -72,17 +92,18 @@ export async function sendMessage(endpoint, message, messages = [], systemPrompt
/**
* Test connection to API endpoint
* @param {string} endpoint - API endpoint URL
* @returns {Promise<boolean>} - Whether connection succeeded
* @param endpoint - API endpoint URL
* @param model - Model name (optional, defaults to 'local-swarm')
* @returns - Whether connection succeeded
*/
export async function testConnection(endpoint) {
export async function testConnection(endpoint: string, model: string = 'local-swarm'): Promise<boolean> {
try {
// Simple test - send minimal message
const response = await fetch(endpoint, {
method: 'POST',
headers: DEFAULT_HEADERS,
body: JSON.stringify({
model: 'gpt-3.5-turbo',
model,
messages: [{ role: 'user', content: 'test' }],
max_tokens: 1
})
+28
View File
@@ -0,0 +1,28 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
/* Vitest support */
"types": ["vitest/globals", "@testing-library/jest-dom"]
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
+10
View File
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
+11
View File
@@ -0,0 +1,11 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
globals: true,
setupFiles: './src/tests/setup.ts',
},
})