DorianandClaude Opus 4.6
ad63a7b1af
Add complete TV series content surface: extraction from AI responses, grid/detail views, TMDB TV search endpoint, and panel tab integration. Includes film_ext-to-TV-series conversion for backward compatibility and AI prompt instructions for [[tv_ext:...]] tags. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
319 lines
12 KiB
TypeScript
319 lines
12 KiB
TypeScript
import { ref, computed } from 'vue'
|
||
import { useChatStore } from '@/stores/chat'
|
||
import { searchWeb } from '@/composables/useWebSearch'
|
||
|
||
type Provider = 'claude' | 'openrouter' | 'mock'
|
||
|
||
const CLAUDE_PATH = '/api/claude/v1/messages'
|
||
const OPENROUTER_PATH = '/api/openrouter'
|
||
|
||
import { mockFilms } from '@/mocks/films'
|
||
import { mockSongs } from '@/mocks/songs'
|
||
import { mockPodcasts } from '@/mocks/podcasts'
|
||
|
||
const filmContext = mockFilms.map((f) =>
|
||
`- [${f.id}] "${f.title}" (${f.year}) dir. ${f.director} | ${f.genres.join(', ')} | ${f.rating}/10 | On: ${f.sources.map(s => s.type).join(', ')}`
|
||
).join('\n')
|
||
|
||
const songContext = mockSongs.map((s) =>
|
||
`- [${s.id}] "${s.title}" by ${s.artist}${s.album ? ` (${s.album})` : ''}${s.year ? ` (${s.year})` : ''} | ${(s.genres ?? []).join(', ')} | On: ${(s.sources ?? []).map(x => x.type).join(', ')}`
|
||
).join('\n')
|
||
|
||
const podcastContext = mockPodcasts.map((p) =>
|
||
`- [${p.id}] "${p.title}" by ${p.host ?? 'Unknown'}${p.year ? ` (${p.year})` : ''} | ${(p.genres ?? []).join(', ')} | On: ${p.sources.map(x => x.type).join(', ')}`
|
||
).join('\n')
|
||
|
||
const SYSTEM_PROMPT = `You are AIUI, a helpful AI assistant with access to the user's media library (films, songs, and podcasts).
|
||
|
||
**News/Factual queries:** When the user asks for "news", "latest", "recent", or current information, lead with a direct answer summarizing the news/facts. You MAY add "For deeper coverage:" with [[podcast_ext:...]] tags only. Do NOT use [[song_ext:...]] or [[film_ext:...]] for news queries—podcasts are the appropriate follow-up. Never substitute an answer with only recommendations.
|
||
|
||
**Films:** When recommending or discussing films from the user's library, use [[film:ID]] where ID is the film's id. For films NOT in the library, use [[film_ext:Title|Year|Director]], e.g. [[film_ext:Brokeback Mountain|2005|Ang Lee]]. Write a brief reason why the film is worth watching on the same line as the tag.
|
||
|
||
**Songs:** When recommending or discussing songs, ALWAYS use tags for every song you mention:
|
||
- Library songs: [[song:ID]] where ID is the song's id (e.g. [[song:s1]]).
|
||
- Other songs: [[song_ext:Title|Artist|Year]] (year optional), e.g. [[song_ext:Never Meant|American Football|1999]].
|
||
Never list songs in plain text only—each recommendation must have a tag so the UI can show playable cards.
|
||
|
||
**Podcasts:** When recommending or discussing podcasts, use tags:
|
||
- Library podcasts: [[podcast:ID]] where ID is the podcast's id (e.g. [[podcast:p1]]).
|
||
- Other podcasts: [[podcast_ext:Title|Host|Year]] (year optional), e.g. [[podcast_ext:What Bitcoin Did|Peter McCormack|2018]].
|
||
Prioritize Podcasting 2.0–friendly platforms: Fountain.fm, Podcast Index, Castopod, Odysee, Rumble, YouTube, Podverse.
|
||
|
||
**Books:** When recommending or discussing books, use [[book_ext:Title|Author|Year]], e.g. [[book_ext:Neuromancer|William Gibson|1984]]. Write a brief reason why the book is worth reading on the same line.
|
||
|
||
**TV Series:** When recommending or discussing TV series/shows, use [[tv_ext:Title|Year|Creator]], e.g. [[tv_ext:Breaking Bad|2008|Vince Gilligan]]. Do NOT use [[film_ext:...]] for TV series — use [[tv_ext:...]] instead. Write a brief reason why the show is worth watching on the same line.
|
||
|
||
**Websites / "Best places to check":** When listing resources, places to check online, or websites for the user to visit, use markdown links: [Name](https://full-url). For simple domains use **Name** (domain.com), e.g. **Bitcoin Mailing List** (gnusha.org).
|
||
|
||
**Music discovery:** For genre-based requests (e.g. "best math rock"), pick from the user's library when relevant, or use [[song_ext:...]] for others. Prioritize indie-friendly platforms: Wavlake, Bandcamp, Internet Archive, SoundCloud, Odysee, Jamendo.
|
||
|
||
Always include these tags so the UI can render rich cards. Write a brief reason why each is worth checking out.
|
||
|
||
The user's film library:
|
||
${filmContext}
|
||
|
||
The user's song library:
|
||
${songContext}
|
||
|
||
The user's podcast library:
|
||
${podcastContext}`
|
||
|
||
const activeProvider = ref<Provider>('claude')
|
||
|
||
const activeModel = ref('claude-sonnet-4')
|
||
|
||
const availableProviders = computed(() => {
|
||
const providers: { id: Provider; name: string; models: { id: string; name: string }[] }[] = [
|
||
{
|
||
id: 'claude',
|
||
name: 'Claude (Max)',
|
||
models: [
|
||
{ id: 'claude-sonnet-4', name: 'Claude Sonnet 4' },
|
||
{ id: 'claude-opus-4', name: 'Claude Opus 4' },
|
||
{ id: 'claude-haiku-3.5', name: 'Claude 3.5 Haiku' },
|
||
],
|
||
},
|
||
]
|
||
providers.push({
|
||
id: 'openrouter',
|
||
name: 'OpenRouter',
|
||
models: [
|
||
{ id: 'meta-llama/llama-4-maverick', name: 'Llama 4 Maverick' },
|
||
{ id: 'qwen/qwen3-235b-a22b-thinking-2507', name: 'Qwen3 235B Thinking' },
|
||
{ id: 'mistralai/mistral-small-3.1-24b-instruct:free', name: 'Mistral Small 3.1 (free)' },
|
||
{ id: 'google/gemma-3-27b-it:free', name: 'Gemma 3 27B (free)' },
|
||
],
|
||
})
|
||
providers.push({
|
||
id: 'mock',
|
||
name: 'Local (no API)',
|
||
models: [{ id: 'echo', name: 'Echo (mirror input)' }],
|
||
})
|
||
return providers
|
||
})
|
||
|
||
function setProvider(provider: Provider) {
|
||
activeProvider.value = provider
|
||
const p = availableProviders.value.find((pp) => pp.id === provider)
|
||
if (p && p.models.length > 0) {
|
||
activeModel.value = p.models[0].id
|
||
}
|
||
}
|
||
|
||
function setModel(model: string) {
|
||
activeModel.value = model
|
||
}
|
||
|
||
interface ChatMessage {
|
||
role: 'user' | 'assistant'
|
||
content: string
|
||
}
|
||
|
||
async function streamMock(
|
||
messages: ChatMessage[],
|
||
onToken: (text: string) => void,
|
||
): Promise<void> {
|
||
const lastUser = messages.filter((m) => m.role === 'user').pop()
|
||
const text = lastUser
|
||
? `You said: "${lastUser.content}"\n\nThis is AIUI in echo mode. Select Claude or OpenRouter from the model picker.`
|
||
: 'Hello! I am AIUI running in mock mode.'
|
||
|
||
for (const char of text) {
|
||
onToken(char)
|
||
await new Promise((r) => setTimeout(r, 12))
|
||
}
|
||
}
|
||
|
||
async function streamClaude(
|
||
messages: ChatMessage[],
|
||
onToken: (text: string) => void,
|
||
onError: (err: string) => void,
|
||
systemPrompt: string,
|
||
webSearch: boolean,
|
||
): Promise<void> {
|
||
const res = await fetch(CLAUDE_PATH, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
model: activeModel.value,
|
||
system: systemPrompt,
|
||
messages,
|
||
stream: true,
|
||
webSearch,
|
||
}),
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const body = await res.text().catch(() => 'Could not read error body')
|
||
onError(`Claude proxy error ${res.status}: ${body}`)
|
||
return
|
||
}
|
||
|
||
await readSSE(res, (data) => {
|
||
const parsed = JSON.parse(data)
|
||
if (parsed.type === 'content_block_delta' && parsed.delta?.text) {
|
||
onToken(parsed.delta.text)
|
||
} else if (parsed.type === 'error') {
|
||
onError(parsed.error?.message ?? 'Claude stream error')
|
||
}
|
||
}, onError)
|
||
}
|
||
|
||
async function streamOpenRouter(
|
||
messages: ChatMessage[],
|
||
onToken: (text: string) => void,
|
||
onError: (err: string) => void,
|
||
systemPrompt: string,
|
||
): Promise<void> {
|
||
const orMessages = [
|
||
{ role: 'system' as const, content: systemPrompt },
|
||
...messages.map((m) => ({ role: m.role as 'user' | 'assistant', content: m.content })),
|
||
]
|
||
|
||
const res = await fetch(OPENROUTER_PATH, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'HTTP-Referer': window.location.origin,
|
||
'X-Title': 'AIUI',
|
||
},
|
||
body: JSON.stringify({
|
||
model: activeModel.value,
|
||
messages: orMessages,
|
||
stream: true,
|
||
}),
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const body = await res.text().catch(() => 'Could not read error body')
|
||
onError(`OpenRouter error ${res.status}: ${body}`)
|
||
return
|
||
}
|
||
|
||
await readSSE(res, (data) => {
|
||
if (data === '[DONE]') return
|
||
const parsed = JSON.parse(data)
|
||
const delta = parsed.choices?.[0]?.delta?.content
|
||
if (delta) onToken(delta)
|
||
}, onError)
|
||
}
|
||
|
||
async function readSSE(
|
||
res: Response,
|
||
onData: (data: string) => void,
|
||
onError: (err: string) => void,
|
||
): Promise<void> {
|
||
const reader = res.body?.getReader()
|
||
if (!reader) {
|
||
onError('No response body')
|
||
return
|
||
}
|
||
|
||
const decoder = new TextDecoder()
|
||
let buffer = ''
|
||
|
||
while (true) {
|
||
const { done, value } = await reader.read()
|
||
if (done) break
|
||
|
||
buffer += decoder.decode(value, { stream: true })
|
||
const lines = buffer.split('\n')
|
||
buffer = lines.pop() ?? ''
|
||
|
||
for (const line of lines) {
|
||
const trimmed = line.trim()
|
||
if (!trimmed || !trimmed.startsWith('data: ')) continue
|
||
const payload = trimmed.slice(6)
|
||
if (payload === '[DONE]') return
|
||
try {
|
||
onData(payload)
|
||
} catch {
|
||
// skip malformed chunks
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function formatWebSearchContext(results: { title: string; url: string; content?: string }[]): string {
|
||
if (results.length === 0) return ''
|
||
const lines = results.map((r, i) => {
|
||
const snippet = r.content ? ` — ${r.content.slice(0, 200)}${r.content.length > 200 ? '…' : ''}` : ''
|
||
return `${i + 1}. [${r.title}](${r.url})${snippet}`
|
||
})
|
||
return `\n\n**Web search results (PRIORITIZE these):**
|
||
- Answer the user's question using these results. Cite sources.
|
||
- You MAY add [[podcast_ext:...]] or [[film_ext:...]] tags for "to learn more" recommendations after your answer.\n\n${lines.join('\n')}`
|
||
}
|
||
|
||
export function useAI() {
|
||
const chatStore = useChatStore()
|
||
|
||
async function sendMessage(userText: string) {
|
||
const provider = activeProvider.value
|
||
|
||
let convId = chatStore.activeConversationId
|
||
if (!convId) {
|
||
convId = chatStore.createConversation()
|
||
}
|
||
const cid = convId
|
||
|
||
chatStore.addMessage(cid, { role: 'user', content: userText })
|
||
const assistantMsg = chatStore.addMessage(cid, { role: 'assistant', content: '' })
|
||
if (!assistantMsg) return
|
||
|
||
chatStore.isStreaming = true
|
||
|
||
let systemPrompt = SYSTEM_PROMPT
|
||
if (chatStore.webSearchEnabled) {
|
||
systemPrompt += `
|
||
|
||
**Web search:** You have access to WebSearch and WebFetch tools. Use them to look up current information, news, and facts when the user asks. You can search the web and fetch page content. Web search is enabled for this session—do not tell the user it is unavailable.`
|
||
}
|
||
if (chatStore.webSearchEnabled && userText.trim()) {
|
||
const results = await searchWeb(userText)
|
||
if (results.length > 0) {
|
||
systemPrompt += formatWebSearchContext(results)
|
||
chatStore.setMessageWebResults(cid, assistantMsg.id, results)
|
||
console.log('[AIUI] Injected', results.length, 'web search results into context')
|
||
} else {
|
||
console.warn('[AIUI] Web search enabled but 0 results — check browser console for [AIUI web-search] logs')
|
||
}
|
||
}
|
||
|
||
const history: ChatMessage[] = chatStore.messages
|
||
.filter((m) => m.id !== assistantMsg.id)
|
||
.map((m) => ({ role: m.role as 'user' | 'assistant', content: m.content }))
|
||
|
||
const onToken = (text: string) => chatStore.appendToLastMessage(cid, text)
|
||
const onError = (err: string) => {
|
||
console.error(`[AIUI ${provider}]`, err)
|
||
chatStore.appendToLastMessage(cid, `⚠ ${err}`)
|
||
}
|
||
|
||
try {
|
||
if (provider === 'claude') {
|
||
await streamClaude(history, onToken, onError, systemPrompt, chatStore.webSearchEnabled)
|
||
} else if (provider === 'openrouter') {
|
||
await streamOpenRouter(history, onToken, onError, systemPrompt)
|
||
} else {
|
||
await streamMock(history, onToken)
|
||
}
|
||
} catch (err) {
|
||
const msg = err instanceof Error ? err.message : String(err)
|
||
console.error(`[AIUI] Connection error:`, err)
|
||
chatStore.appendToLastMessage(cid, `\n\n⚠ Connection error: ${msg}`)
|
||
} finally {
|
||
chatStore.isStreaming = false
|
||
}
|
||
}
|
||
|
||
return {
|
||
sendMessage,
|
||
activeProvider,
|
||
activeModel,
|
||
availableProviders,
|
||
setProvider,
|
||
setModel,
|
||
}
|
||
}
|