Projects › BibleWeb › AI Tools › Multi-turn conversations
Done

Multi-turn conversations

Area: AI Tools Milestone: v3

Context

Problem: Bible study questions often build on each other — "What does John 3:16 mean?" → "How does that connect to Romans 5:8?" → "Can you explain the Greek word for 'love' there?". A single Q&A without memory would force users to repeat context.

Solution: Persistent conversation threads stored in localStorage. Each conversation maintains message history, so the AI has context from previous questions. Users can create multiple conversations, switch between them, and delete old ones.

Not included: Cloud sync of conversations, sharing conversations, or conversation search. Conversations are local to the browser.

Functional

User flow:

  1. User opens /ask → sees their conversations in a left sidebar
  2. Current conversation shows message history
  3. Each new message includes the last 10 messages as context for the AI
  4. User can click "+ New" to start a fresh conversation
  5. Conversations auto-title from the first user message (first 40 characters)
  6. User can delete conversations from the sidebar

Edge cases:

  • Only last 10 messages sent as history (keeps API costs manageable)
  • Conversations persist across page refreshes via localStorage
  • Save triggers: debounced every 1.5 seconds + immediate on beforeunload

UX & Design

Sidebar:

  • Left panel listing all conversations
  • Each shows: auto-generated title + close (×) button
  • "+ New" button at top
  • On mobile: hidden by default, hamburger toggle

Message list: Scrollable area showing alternating user/AI messages with clear visual distinction.

Technical

Store: apps/web/src/lib/stores/chat.svelte.ts — Svelte 5 runes $state

  • Structure: { conversations: Conversation[], activeConversationId: string | null }
  • Each Conversation: { id, title, messages[], createdAt }
  • Auto-title: first user message truncated to 40 chars
  • Persisted to localStorage under key bibleweb_chat
  • Save debounced 1.5s, immediate on beforeunload

API integration: Last 10 messages sent as history[] to /api/ask. Server rebuilds full message array prepending system prompt each time.

Components:

  • ConversationSidebar.svelte — conversation list, new/select/delete
  • MessageList.svelte — renders messages
  • ChatInput.svelte — text input with Enter to send

Files:

  • apps/web/src/lib/stores/chat.svelte.ts — conversation store
  • apps/web/src/lib/components/ask/ConversationSidebar.svelte
  • apps/web/src/lib/components/ask/MessageList.svelte
  • apps/web/src/lib/components/ask/ChatInput.svelte
  • apps/web/src/routes/(app)/ask/+page.svelte — page component

Status

Current: DONE Milestone: v3 Priority: High — essential for natural conversation flow

History:

  • Implemented alongside the AI chat feature
  • localStorage chosen over server-side storage for simplicity and privacy

Dependencies:

  • Requires: AI chat (DONE)

Screenshots

Feature screenshot
← Back to AI Tools features