logo

Swiftor AI Chat ​

Overview ​

Swiftor AI provides a versatile chat interface with two primary modes:

  1. Interpreter Mode: Connects directly to a running Swiftor Virtual Machine (VM) via WebSocket. This allows you to interact with the VM's environment, execute commands, and potentially run specific tools or scripts available within the VM through an AI model.
  2. Assistant Mode: Connects to various general-purpose Large Language Models (LLMs) for conversation, code generation, Q&A, and other AI tasks. Assistant chats are saved locally in your browser.

The interface is designed to seamlessly switch between these modes based on your selection.

Interface Layout ​

The chat interface consists of three main areas:

  1. Side Menu (Left): Lists available chat sessions, grouped by type (Interpreter/Assistant). It includes a search bar and can be toggled on/off.
  2. Chat Area (Center): Displays the conversation history for the currently selected session.
  3. Input Area (Bottom): Contains the text input field, model selection dropdown, VM selection dropdown (in Interpreter mode), and the send button.

Side Menu ​

The side menu organizes your interactions:

Side Menu
  • Toggle Button: The ☰ button in the top header bar shows or hides the side menu. Your preference is saved locally.
  • Search Bar: Filters the list of VMs and Assistant chat histories by name.
  • Interpreter Section:
    • Lists your currently running VMs fetched from the backend.
    • Clicking a running VM entry connects the chat interface to that VM's interpreter service via WebSocket and switches to Interpreter mode.
    • Stopped VMs are shown but are disabled (greyed out).
    • A refresh button allows you to fetch the latest VM list and statuses.
    • If loading VMs fails, an error message is displayed.
  • Assistant Section:
    • Lists your previously saved Assistant chat sessions (stored in browser localStorage).
    • Shows the chat name (auto-generated from the first message if not renamed), the model used, and a snippet of the last message.
    • Chats are sorted by the timestamp of the last message (most recent first).
    • Clicking a chat loads its history and associated model into the main chat area.
  • New Chat Button: Located at the bottom, this button creates a new, empty Assistant chat session and selects a default Assistant model.

Chat Area ​

This is where the conversation happens:

Chat Area
  • Messages: Displays messages from the user and the AI (Interpreter or Assistant).
  • Welcome Banner: When no chat is loaded, a Swiftor ASCII art banner is shown.
  • Message Formatting:
    • Standard messages are displayed with role indication (User, Server, Assistant).
    • Markdown content (from Assistant) is rendered with formatting (headings, lists, links, etc.).
    • Code blocks are displayed with syntax highlighting (using vscDarkPlus theme) and a copy button.
    • Console output (typically from Interpreter) is displayed in a distinct block with a monospace font.
  • Scrolling: The area automatically scrolls to the bottom as new messages arrive.

Input Area ​

This area controls your interaction with the selected AI or VM:

Input Area
  • Model Selector:
    • Allows choosing the AI model to use.
    • Models are grouped by type (Interpreter, Assistant).
    • Availability depends on the current mode:
      • If connected to a VM (Interpreter mode), only Interpreter models are selectable.
      • If in an Assistant chat, only Assistant models are selectable.
      • Some models might be disabled if switching would be incompatible with the current conversation history.
    • Changing the model for an Assistant chat updates the model associated with that chat history in localStorage.
  • VM Selector (Interpreter Mode Only):
    • Appears next to the Model Selector when an Interpreter model is selected.
    • Lists running VMs.
    • Allows switching the WebSocket connection to a different running VM.
    • Shows "Select VM" if no VM is currently connected.
  • Text Input:
    • A multi-line textarea for typing messages.
    • Press Enter to send.
    • Press Shift+Enter for a newline.
    • Press Tab for indentation (inserts 4 spaces).
    • The input area expands vertically automatically up to a maximum height.
  • Send Button: Sends the message in the text input. Disabled while the AI is generating a response.

Interpreter Mode ​

Interact directly with your running VMs.

  1. Connect: Select a running VM from the Side Menu under "Interpreter" or via the VM Selector dropdown in the Input Area. A WebSocket connection will be established.
  2. Select Model: Choose an appropriate Interpreter model (e.g., Claude 3.5 Sonnet).
  3. Send Commands/Messages: Type natural language instructions or commands into the input area and press Enter.
  4. View Output: The AI model interacts with the VM and streams back responses, which might include:
    • Console Output: Direct output from commands executed on the VM.
    • Code Blocks: Suggested code or scripts to run.
    • Status Messages: Updates from the server.
  5. Approve Execution: If the Interpreter model suggests code to run (often presented in a code block), an "Approve" button may appear next to the last code block from the assistant. Clicking this sends a confirmation (go command) back to the interpreter to execute the suggested code on the connected VM.

Assistant Mode ​

Engage with general-purpose LLMs.

  1. Start/Load Chat:
    • Click "New Chat" in the Side Menu to start a fresh conversation.
    • Click an existing chat under "Assistant" in the Side Menu to load its history.
  2. Select Model: Choose an Assistant model (e.g., Llama 3.1, Gemini Pro) using the Model Selector dropdown.
  3. Send Messages: Type your query or prompt and press Enter.
  4. View Response: The selected LLM will stream its response, typically formatted in Markdown, which may include text, lists, code blocks, etc.
  5. Saving: Conversations are automatically saved to your browser's localStorage as you interact. The chat name in the side menu is automatically derived from the first user message but can be manually edited later (editing functionality not shown in provided code).

Common Features ​

  • Code Copying: Click the copy icon next to any code block to copy its content to your clipboard.
  • Notifications: Informational messages or errors (e.g., connection issues, failed actions) may appear at the top of the chat area.