bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

Add LLM tool calling for creating tasks, notes, and searching from chat

Browse Source 
Ollama tool/function calling integration allows the LLM to create tasks,
create notes, and search existing notes on behalf of the user during chat.
Multi-round tool loop (max 5 rounds) lets the model execute tools then
produce a natural language response. Tool results are persisted in a new
JSONB column on messages and rendered as compact cards with linked titles.

- Migration 0013: add tool_calls JSONB column to messages
- New services/tools.py: tool definitions + execute_tool dispatcher
- llm.py: ChatChunk dataclass, stream_chat_with_tools(), date in system prompt
- generation_task.py: multi-round tool call loop with SSE tool_call events
- Frontend: ToolCallRecord type, streamingToolCalls in store, ToolCallCard
  component, rendering in ChatMessage and ChatView streaming bubble

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-02-14 23:34:36 -05:00
parent f089b16080
commit 8996b45e50
11 changed files with 522 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ChatMessage.vue
+14
View File
@@ -2,6 +2,7 @@
import { computed } from "vue";
import { renderMarkdown } from "@/utils/markdown";
import { useSettingsStore } from "@/stores/settings";
import ToolCallCard from "@/components/ToolCallCard.vue";
import type { Message } from "@/types/chat";
const settingsStore = useSettingsStore();
@@ -48,6 +49,13 @@ const roleLabel = computed(() => {
</div>
</div>
<div class="message-content prose" v-html="rendered"></div>
<div v-if="message.tool_calls?.length" class="tool-calls">
<ToolCallCard
v-for="(tc, i) in message.tool_calls"
:key="i"
:tool-call="tc"
/>
</div>
<div
v-if="message.context_note_id"
class="context-badge"
@@ -157,6 +165,12 @@ const roleLabel = computed(() => {
color: #fff;
border-color: var(--color-primary);
}
.tool-calls {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.4rem;
}
.context-badge {
margin-top: 0.4rem;
font-size: 0.75rem;
frontend/src/components/ToolCallCard.vue
+124
View File
@@ -0,0 +1,124 @@
<script setup lang="ts">
import { computed } from "vue";
import type { ToolCallRecord } from "@/types/chat";
const props = defineProps<{
toolCall: ToolCallRecord;
}>();
const label = computed(() => {
if (!props.toolCall.result.success) return "Error";
switch (props.toolCall.result.type) {
case "task":
return "Created task";
case "note":
return "Created note";
case "search":
return "Searched notes";
default:
return "Tool call";
}
});
const title = computed(() => {
const data = props.toolCall.result.data;
if (!data) return null;
if (typeof data.title === "string") return data.title;
return null;
});
const linkTo = computed(() => {
const data = props.toolCall.result.data;
if (!data || typeof data.id !== "number") return null;
return `/notes/${data.id}`;
});
const searchResults = computed(() => {
const data = props.toolCall.result.data;
if (!data || props.toolCall.result.type !== "search") return null;
const results = data.results as Array<{ id: number; title: string; type: string }> | undefined;
return results && results.length > 0 ? results : null;
});
</script>
<template>
<div class="tool-call-card" :class="{ error: toolCall.status === 'error' }">
<span class="tool-label">{{ label }}</span>
<template v-if="toolCall.status === 'error'">
<span class="tool-error">{{ toolCall.result.error }}</span>
</template>
<template v-else-if="searchResults">
<span class="tool-search-info">{{ (toolCall.result.data?.total as number) ?? 0 }} found</span>
<div class="tool-search-results">
<router-link
v-for="r in searchResults"
:key="r.id"
:to="`/notes/${r.id}`"
class="tool-search-item"
>
{{ r.title || "Untitled" }}
</router-link>
</div>
</template>
<template v-else-if="linkTo">
<router-link :to="linkTo" class="tool-link">{{ title }}</router-link>
</template>
</div>
</template>
<style scoped>
.tool-call-card {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
margin-top: 0.4rem;
}
.tool-call-card.error {
border-color: var(--color-danger, #e74c3c);
}
.tool-label {
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.7rem;
}
.tool-link {
color: var(--color-primary);
text-decoration: none;
}
.tool-link:hover {
text-decoration: underline;
}
.tool-error {
color: var(--color-danger, #e74c3c);
}
.tool-search-info {
color: var(--color-text-muted);
}
.tool-search-results {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
width: 100%;
}
.tool-search-item {
color: var(--color-primary);
text-decoration: none;
font-size: 0.8rem;
}
.tool-search-item:hover {
text-decoration: underline;
}
.tool-search-item:not(:last-child)::after {
content: ",";
color: var(--color-text-muted);
margin-right: 0.1rem;
}
</style>
frontend/src/stores/chat.ts
+15
View File
@@ -17,6 +17,7 @@ import type {
OllamaStatus,
RunningModel,
SendMessageResponse,
ToolCallRecord,
} from "@/types/chat";
export const useChatStore = defineStore("chat", () => {
@@ -26,6 +27,7 @@ export const useChatStore = defineStore("chat", () => {
const loading = ref(false);
const streaming = ref(false);
const streamingContent = ref("");
const streamingToolCalls = ref<ToolCallRecord[]>([]);
const lastContextMeta = ref<ContextMeta | null>(null);
const models = ref<OllamaModel[]>([]);
const runningModels = ref<RunningModel[]>([]);
@@ -187,6 +189,12 @@ export const useChatStore = defineStore("chat", () => {
case "chunk":
streamingContent.value += event.data.chunk as string;
break;
case "tool_call":
streamingToolCalls.value = [
...streamingToolCalls.value,
event.data.tool_call as ToolCallRecord,
];
break;
case "done":
gotDone = true;
{
@@ -196,12 +204,16 @@ export const useChatStore = defineStore("chat", () => {
role: "assistant",
content: streamingContent.value,
context_note_id: null,
tool_calls: streamingToolCalls.value.length
? [...streamingToolCalls.value]
: null,
created_at: new Date().toISOString(),
};
if (currentConversation.value?.id === convId) {
currentConversation.value.messages.push(assistantMsg);
}
streamingContent.value = "";
streamingToolCalls.value = [];
streaming.value = false;
// Update conversation in list
@@ -216,6 +228,7 @@ export const useChatStore = defineStore("chat", () => {
gotDone = true;
streaming.value = false;
streamingContent.value = "";
streamingToolCalls.value = [];
useToastStore().show(
"Chat error: " + (event.data.error as string),
"error",
@@ -252,6 +265,7 @@ export const useChatStore = defineStore("chat", () => {
streaming.value = false;
streamingContent.value = "";
streamingToolCalls.value = [];
}
async function cancelGeneration() {
@@ -357,6 +371,7 @@ export const useChatStore = defineStore("chat", () => {
loading,
streaming,
streamingContent,
streamingToolCalls,
lastContextMeta,
models,
runningModels,
frontend/src/types/chat.ts
+8
View File
@@ -1,3 +1,10 @@
export interface ToolCallRecord {
function: string;
arguments: Record<string, unknown>;
result: { success: boolean; type?: string; data?: Record<string, unknown>; error?: string };
status: "success" | "error";
}
export interface Message {
id: number;
conversation_id: number;
@@ -5,6 +12,7 @@ export interface Message {
content: string;
status?: "complete" | "generating" | "error";
context_note_id: number | null;
tool_calls?: ToolCallRecord[] | null;
created_at: string;
}
frontend/src/views/ChatView.vue
+14
View File
@@ -7,6 +7,7 @@ import { apiGet } from "@/api/client";
import { renderMarkdown } from "@/utils/markdown";
import ChatMessage from "@/components/ChatMessage.vue";
import ModelSelector from "@/components/ModelSelector.vue";
import ToolCallCard from "@/components/ToolCallCard.vue";
import type { Note } from "@/types/note";
const route = useRoute();
@@ -400,6 +401,13 @@ function excludeAutoNote(noteId: number) {
<div class="message-header">
<span class="role-label">{{ settingsStore.assistantName }}</span>
</div>
<div v-if="store.streamingToolCalls.length" class="streaming-tool-calls">
<ToolCallCard
v-for="(tc, i) in store.streamingToolCalls"
:key="i"
:tool-call="tc"
/>
</div>
<div class="message-content prose" v-html="streamingRendered"></div>
<span class="typing-indicator"></span>
</div>
@@ -690,6 +698,12 @@ function excludeAutoNote(noteId: number) {
word-break: break-word;
}
.streaming-tool-calls {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.4rem;
}
.typing-indicator {
display: inline-block;
width: 6px;