fix: make llm provider async and add tool toggle

2025-12-24 17:32:46 +00:00
parent d9cd16601b
commit b241c47fd9
8 changed files with 149 additions and 28 deletions
--- a/.living_spec/stories/04_ollama_model_detection.md
+++ b/.living_spec/stories/04_ollama_model_detection.md
@@ -0,0 +1,17 @@
+# Story: Ollama Model Detection
+
+## User Story
+**As a** User
+**I want to** select my Ollama model from a dropdown list of installed models
+**So that** I don't have to manually type (and potentially mistype) the model names.
+
+## Acceptance Criteria
+*   [ ] Backend: Implement `get_ollama_models()` command.
+    *   [ ] Call `GET /api/tags` on the Ollama instance.
+    *   [ ] Parse the JSON response to extracting model names.
+*   [ ] Frontend: Replace the "Ollama Model" text input with a `<select>` dropdown.
+*   [ ] Frontend: Populate the dropdown on load.
+*   [ ] Frontend: Handle connection errors gracefully (if Ollama isn't running, show empty or error).
+
+## Out of Scope
+*   Downloading new models via the UI (pulling).
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2056,6 +2056,7 @@ checksum = "6373607a59f0be73a39b6fe456b8192fcc3585f602af20751600e974dd455e77"
 name = "living-spec-standalone"
 version = "0.1.0"
 dependencies = [
+ "async-trait",
 "chrono",
 "ignore",
 "reqwest",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -28,4 +28,5 @@ walkdir = "2.5.0"
 reqwest = { version = "0.12.28", features = ["json", "blocking"] }
 uuid = { version = "1.19.0", features = ["v4", "serde"] }
 chrono = { version = "0.4.42", features = ["serde"] }
+async-trait = "0.1.89"

--- a/src-tauri/src/commands/chat.rs
+++ b/src-tauri/src/commands/chat.rs
@@ -4,7 +4,7 @@ use crate::llm::types::{
    Message, ModelProvider, Role, ToolCall, ToolDefinition, ToolFunctionDefinition,
 };
 use crate::state::SessionState;
-use serde::{Deserialize, Serialize};
+use serde::Deserialize;
 use serde_json::json;
 use tauri::State;

@@ -13,6 +13,7 @@ pub struct ProviderConfig {
    pub provider: String, // "ollama"
    pub model: String,
    pub base_url: Option<String>,
+    pub enable_tools: Option<bool>,
 }

 const MAX_TURNS: usize = 10;
@@ -34,7 +35,12 @@ pub async fn chat(
    };

    // 2. Define Tools
-    let tools = get_tool_definitions();
+    let tool_defs = get_tool_definitions();
+    let tools = if config.enable_tools.unwrap_or(true) {
+        tool_defs.as_slice()
+    } else {
+        &[]
+    };

    // 3. Agent Loop
    let mut current_history = messages.clone();
@@ -49,7 +55,8 @@ pub async fn chat(

        // Call LLM
        let response = provider
-            .chat(&config.model, &current_history, &tools)
+            .chat(&config.model, &current_history, tools)
+            .await
            .map_err(|e| format!("LLM Error: {}", e))?;

        // Process Response
--- a/src-tauri/src/llm/ollama.rs
+++ b/src-tauri/src/llm/ollama.rs
@@ -1,6 +1,7 @@
 use crate::llm::types::{
    CompletionResponse, FunctionCall, Message, ModelProvider, Role, ToolCall, ToolDefinition,
 };
+use async_trait::async_trait;
 use serde::{Deserialize, Serialize};
 use serde_json::Value;

@@ -76,14 +77,15 @@ struct OllamaResponseFunctionCall {
    arguments: Value, // Ollama returns Object, we convert to String for internal storage
 }

+#[async_trait]
 impl ModelProvider for OllamaProvider {
-    fn chat(
+    async fn chat(
        &self,
        model: &str,
        messages: &[Message],
        tools: &[ToolDefinition],
    ) -> Result<CompletionResponse, String> {
-        let client = reqwest::blocking::Client::new();
+        let client = reqwest::Client::new();
        let url = format!("{}/api/chat", self.base_url.trim_end_matches('/'));

        // Convert domain Messages to Ollama Messages (handling String -> Object args mismatch)
@@ -129,16 +131,18 @@ impl ModelProvider for OllamaProvider {
            .post(&url)
            .json(&request_body)
            .send()
+            .await
            .map_err(|e| format!("Request failed: {}", e))?;

        if !res.status().is_success() {
            let status = res.status();
-            let text = res.text().unwrap_or_default();
+            let text = res.text().await.unwrap_or_default();
            return Err(format!("Ollama API error {}: {}", status, text));
        }

        let response_body: OllamaResponse = res
            .json()
+            .await
            .map_err(|e| format!("Failed to parse response: {}", e))?;

        // Convert Response back to Domain types
--- a/src-tauri/src/llm/types.rs
+++ b/src-tauri/src/llm/types.rs
@@ -1,3 +1,4 @@
+use async_trait::async_trait;
 use serde::{Deserialize, Serialize};
 use std::fmt::Debug;

@@ -62,8 +63,9 @@ pub struct CompletionResponse {
 }

 /// The abstraction for different LLM providers (Ollama, Anthropic, etc.)
+#[async_trait]
 pub trait ModelProvider: Send + Sync {
-    fn chat(
+    async fn chat(
        &self,
        model: &str,
        messages: &[Message],
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -8,6 +8,7 @@ export function Chat() {
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [model, setModel] = useState("llama3.1"); // Default local model
+  const [enableTools, setEnableTools] = useState(true);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const scrollToBottom = () => {
@@ -21,7 +22,7 @@ export function Chat() {

    const userMsg: Message = { role: "user", content: input };
    const newHistory = [...messages, userMsg];
-    
+
    setMessages(newHistory);
    setInput("");
    setLoading(true);
@@ -31,6 +32,7 @@ export function Chat() {
        provider: "ollama",
        model: model,
        base_url: "http://localhost:11434",
+        enable_tools: enableTools,
      };

      // Invoke backend chat command
@@ -53,71 +55,157 @@ export function Chat() {
  };

  return (
-    <div className="chat-container" style={{ display: "flex", flexDirection: "column", height: "100%", maxWidth: "800px", margin: "0 auto" }}>
+    <div
+      className="chat-container"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        maxWidth: "800px",
+        margin: "0 auto",
+      }}
+    >
      {/* Settings Bar */}
-      <div style={{ padding: "10px", borderBottom: "1px solid #ddd", display: "flex", gap: "10px", alignItems: "center" }}>
+      <div
+        style={{
+          padding: "10px",
+          borderBottom: "1px solid #ddd",
+          display: "flex",
+          gap: "10px",
+          alignItems: "center",
+        }}
+      >
        <label>Ollama Model:</label>
-        <input 
-          value={model} 
-          onChange={(e) => setModel(e.target.value)} 
+        <input
+          value={model}
+          onChange={(e) => setModel(e.target.value)}
          placeholder="e.g. llama3, mistral"
          style={{ padding: "5px" }}
        />
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "5px",
+            marginLeft: "10px",
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={enableTools}
+            onChange={(e) => setEnableTools(e.target.checked)}
+          />
+          Enable Tools
+        </label>
      </div>

      {/* Messages Area */}
-      <div style={{ flex: 1, overflowY: "auto", padding: "20px", display: "flex", flexDirection: "column", gap: "15px" }}>
+      <div
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "15px",
+        }}
+      >
        {messages.map((msg, idx) => (
-          <div 
-            key={idx} 
+          <div
+            key={idx}
            className={`message ${msg.role}`}
            style={{
              alignSelf: msg.role === "user" ? "flex-end" : "flex-start",
              maxWidth: "80%",
              padding: "10px 15px",
              borderRadius: "10px",
-              background: msg.role === "user" ? "#007AFF" : msg.role === "tool" ? "#f0f0f0" : "#E5E5EA",
+              background:
+                msg.role === "user"
+                  ? "#007AFF"
+                  : msg.role === "tool"
+                    ? "#f0f0f0"
+                    : "#E5E5EA",
              color: msg.role === "user" ? "white" : "black",
              border: msg.role === "tool" ? "1px solid #ccc" : "none",
              fontFamily: msg.role === "tool" ? "monospace" : "inherit",
              fontSize: msg.role === "tool" ? "0.9em" : "1em",
-              whiteSpace: msg.role === "tool" ? "pre-wrap" : "normal"
+              whiteSpace: msg.role === "tool" ? "pre-wrap" : "normal",
            }}
          >
-            <strong>{msg.role === "user" ? "You" : msg.role === "tool" ? "Tool Output" : "Agent"}</strong>
+            <strong>
+              {msg.role === "user"
+                ? "You"
+                : msg.role === "tool"
+                  ? "Tool Output"
+                  : "Agent"}
+            </strong>
            {msg.role === "tool" ? (
-               <div style={{maxHeight: "200px", overflow: "auto"}}>{msg.content}</div>
+              <div style={{ maxHeight: "200px", overflow: "auto" }}>
+                {msg.content}
+              </div>
            ) : (
              <Markdown>{msg.content}</Markdown>
            )}
-            
+
            {/* Show Tool Calls if present */}
            {msg.tool_calls && (
-              <div style={{ marginTop: "10px", fontSize: "0.85em", color: "#666" }}>
+              <div
+                style={{ marginTop: "10px", fontSize: "0.85em", color: "#666" }}
+              >
                {msg.tool_calls.map((tc, i) => (
-                  <div key={i} style={{ background: "rgba(0,0,0,0.05)", padding: "5px", borderRadius: "4px" }}>
-                    🛠 <code>{tc.function.name}({tc.function.arguments})</code>
+                  <div
+                    key={i}
+                    style={{
+                      background: "rgba(0,0,0,0.05)",
+                      padding: "5px",
+                      borderRadius: "4px",
+                    }}
+                  >
+                    🛠{" "}
+                    <code>
+                      {tc.function.name}({tc.function.arguments})
+                    </code>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
-        {loading && <div style={{ alignSelf: "flex-start", color: "#888" }}>Thinking...</div>}
+        {loading && (
+          <div style={{ alignSelf: "flex-start", color: "#888" }}>
+            Thinking...
+          </div>
+        )}
        <div ref={messagesEndRef} />
      </div>

      {/* Input Area */}
-      <div style={{ padding: "20px", borderTop: "1px solid #ddd", display: "flex", gap: "10px" }}>
+      <div
+        style={{
+          padding: "20px",
+          borderTop: "1px solid #ddd",
+          display: "flex",
+          gap: "10px",
+        }}
+      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && sendMessage()}
          placeholder="Ask the agent to do something..."
-          style={{ flex: 1, padding: "10px", borderRadius: "4px", border: "1px solid #ccc" }}
+          style={{
+            flex: 1,
+            padding: "10px",
+            borderRadius: "4px",
+            border: "1px solid #ccc",
+          }}
          disabled={loading}
        />
-        <button onClick={sendMessage} disabled={loading} style={{ padding: "10px 20px" }}>
+        <button
+          onClick={sendMessage}
+          disabled={loading}
+          style={{ padding: "10px 20px" }}
+        >
          Send
        </button>
      </div>
--- a/src/types.ts
+++ b/src/types.ts
@@ -36,4 +36,5 @@ export interface ProviderConfig {
  provider: string;
  model: string;
  base_url?: string;
+  enable_tools?: boolean;
 }