github/Fabric
1
1
Fork 0
mirror of https://github.com/danielmiessler/Fabric.git synced 2026-01-10 06:48:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: add pattern variables support to REST API chat endpoint

Browse Source 
## CHANGES

- Add Variables field to PromptRequest struct
- Pass pattern variables through chat handler
- Create API variables documentation example
- Add pattern variables UI in web interface
- Create pattern variables store in Svelte
- Include variables in chat service requests
- Add JSON textarea for variable input
This commit is contained in:
Kayvan Sylvan
2025-06-19 13:10:05 -07:00
parent 70fccaf2fb
commit c6d612ee9a
6 changed files with 188 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
restapi/chat.go
View File

@@ -24,12 +24,13 @@ type ChatHandler struct {
}
type PromptRequest struct {
UserInput string `json:"userInput"`
Vendor string `json:"vendor"`
Model string `json:"model"`
ContextName string `json:"contextName"`
PatternName string `json:"patternName"`
StrategyName string `json:"strategyName"` // Optional strategy name
UserInput string `json:"userInput"`
Vendor string `json:"vendor"`
Model string `json:"model"`
ContextName string `json:"contextName"`
PatternName string `json:"patternName"`
StrategyName string `json:"strategyName"` // Optional strategy name
Variables map[string]string `json:"variables,omitempty"` // Pattern variables
}
type ChatRequest struct {
@@ -118,9 +119,10 @@ func (h *ChatHandler) HandleChat(c *gin.Context) {
Role: "user",
Content: p.UserInput,
},
PatternName: p.PatternName,
ContextName: p.ContextName,
Language: request.Language, // Pass the language field
PatternName: p.PatternName,
ContextName: p.ContextName,
PatternVariables: p.Variables, // Pass pattern variables
Language: request.Language, // Pass the language field
}
opts := &common.ChatOptions{

105
restapi/docs/API_VARIABLES_EXAMPLE.md Normal file
View File

@@ -0,0 +1,105 @@
# REST API Pattern Variables Example
This example demonstrates how to use pattern variables in REST API calls to the `/chat` endpoint.
## Example: Using the `translate` pattern with variables
### Request
```json
{
"prompts": [
{
"userInput": "Hello my name is Kayvan",
"patternName": "translate",
"model": "gpt-4o",
"vendor": "openai",
"contextName": "",
"strategyName": "",
"variables": {
"lang_code": "fr"
}
}
],
"language": "en",
"temperature": 0.7,
"topP": 0.9,
"frequencyPenalty": 0.0,
"presencePenalty": 0.0
}
```
### Pattern Content
The `translate` pattern contains:
```markdown
You are an expert translator... translate them as accurately and perfectly as possible into the language specified by its language code {{lang_code}}...
...
- Translate the document as accurately as possible keeping a 1:1 copy of the original text translated to {{lang_code}}.
{{input}}
```
### How it works
1. The pattern is loaded from `patterns/translate/system.md`
2. The `{{lang_code}}` variable is replaced with `"fr"` from the variables map
3. The `{{input}}` placeholder is replaced with `"Hello my name is Kayvan"`
4. The resulting processed pattern is sent to the AI model
### Expected Result
The AI would receive a prompt asking it to translate "Hello my name is Kayvan" to French (fr), and would respond with something like "Bonjour, je m'appelle Kayvan".
## Testing with curl
```bash
curl -X POST http://localhost:8080/api/chat \
-H "Content-Type: application/json" \
-d '{
"prompts": [
{
"userInput": "Hello my name is Kayvan",
"patternName": "translate",
"model": "gpt-4o",
"vendor": "openai",
"variables": {
"lang_code": "fr"
}
}
],
"temperature": 0.7
}'
```
## Multiple Variables Example
For patterns that use multiple variables:
```json
{
"prompts": [
{
"userInput": "Analyze this business model",
"patternName": "custom_analysis",
"model": "gpt-4o",
"variables": {
"role": "expert consultant",
"experience": "15",
"focus_areas": "revenue, scalability, market fit",
"output_format": "bullet points"
}
}
]
}
```
## Implementation Details
- Variables are passed in the `variables` field as a key-value map
- Variables are processed using Go's template system
- The `{{input}}` variable is automatically handled and should not be included in the variables map
- Variables support the same features as CLI variables (plugins, extensions, etc.)

39
web/src/lib/components/chat/DropdownGroup.svelte
View File

@@ -3,8 +3,11 @@
import Models from "./Models.svelte";
import ModelConfig from "./ModelConfig.svelte";
import { Select } from "$lib/components/ui/select";
import { Input } from "$lib/components/ui/input";
import { Label } from "$lib/components/ui/label";
import { languageStore } from '$lib/store/language-store';
import { strategies, selectedStrategy, fetchStrategies } from '$lib/store/strategy-store';
import { patternVariables } from '$lib/store/pattern-store';
import { onMount } from 'svelte';
const languages = [
@@ -18,6 +21,25 @@
{ code: 'it', name: 'Italian' }
];
let variablesJsonString = '';
// Parse JSON string and update variables store
function updateVariables() {
try {
if (variablesJsonString.trim() === '') {
patternVariables.set({});
} else {
const parsed = JSON.parse(variablesJsonString);
if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
patternVariables.set(parsed);
}
}
} catch (e) {
// Don't update the store if JSON is invalid - just ignore the error
// This allows partial typing without breaking
}
}
onMount(() => {
fetchStrategies();
});
@@ -33,7 +55,7 @@
<Models />
</div>
<div>
<Select
<Select
bind:value={$languageStore}
class="bg-primary-800/30 border-none hover:bg-primary-800/40 transition-colors"
>
@@ -43,7 +65,7 @@
</Select>
</div>
<div>
<Select
<Select
bind:value={$selectedStrategy}
class="bg-primary-800/30 border-none hover:bg-primary-800/40 transition-colors"
>
@@ -53,8 +75,19 @@
{/each}
</Select>
</div>
<div>
<Label for="pattern-variables" class="text-xs text-white/70 mb-1 block">Pattern Variables (JSON)</Label>
<textarea
id="pattern-variables"
bind:value={variablesJsonString}
on:input={updateVariables}
placeholder="{`{\"lang_code\": \"fr\", \"role\": \"expert\"}`}"
class="w-full h-20 px-3 py-2 text-sm bg-primary-800/30 border-none rounded-md hover:bg-primary-800/40 transition-colors text-white placeholder-white/50 resize-none focus:ring-1 focus:ring-white/20 focus:outline-none"
style="font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;"
></textarea>
</div>
</div>
<!-- Right side - Model Config -->
<div class="w-[65%]">
<ModelConfig />

1
web/src/lib/interfaces/chat-interface.ts
View File

@@ -8,6 +8,7 @@ export interface ChatPrompt {
model: string;
patternName?: string;
strategyName?: string; // Optional strategy name to prepend strategy prompt
variables?: { [key: string]: string }; // Pattern variables
}
export interface ChatConfig {

55
web/src/lib/services/ChatService.ts
View File

@@ -6,7 +6,7 @@ import type {
} from '$lib/interfaces/chat-interface';
import { get } from 'svelte/store';
import { modelConfig } from '$lib/store/model-store';
import { systemPrompt, selectedPatternName } from '$lib/store/pattern-store';
import { systemPrompt, selectedPatternName, patternVariables } from '$lib/store/pattern-store';
import { chatConfig } from '$lib/store/chat-config';
import { messageStore } from '$lib/store/chat-store';
import { languageStore } from '$lib/store/language-store';
@@ -77,7 +77,7 @@ export class ChatService {
// Remove markdown fence if present
content = content.replace(/^```markdown\n/, '');
content = content.replace(/\n```$/, '');
// Existing cleaning
content = content.replace(/^# OUTPUT\s*\n/, '');
content = content.replace(/^\s*\n/, '');
@@ -88,33 +88,33 @@ export class ChatService {
content = content.replace(/\n{3,}/g, '\n\n');
return content;
}
private createMessageStream(reader: ReadableStreamDefaultReader<Uint8Array>): ReadableStream<StreamResponse> {
let buffer = '';
const cleanPatternOutput = this.cleanPatternOutput.bind(this);
const language = get(languageStore);
const validator = new LanguageValidator(language);
const processResponse = (response: StreamResponse) => {
const pattern = get(selectedPatternName);
if (pattern) {
response.content = cleanPatternOutput(response.content);
// Simplified format determination - always markdown unless mermaid
const isMermaid = [
'graph TD', 'gantt', 'flowchart',
'graph TD', 'gantt', 'flowchart',
'sequenceDiagram', 'classDiagram', 'stateDiagram'
].some(starter => response.content.trim().startsWith(starter));
response.format = isMermaid ? 'mermaid' : 'markdown';
}
if (response.type === 'content') {
response.content = validator.enforceLanguage(response.content);
}
return response;
};
return new ReadableStream({
@@ -162,18 +162,18 @@ export class ChatService {
}
});
}
private createChatPrompt(userInput: string, systemPromptText?: string): ChatPrompt {
const config = get(modelConfig);
const language = get(languageStore);
const languageInstruction = language !== 'en'
const languageInstruction = language !== 'en'
? `You MUST respond in ${language} language. All output must be in ${language}. `
// ? `You MUST respond in ${language} language. ALL output, including section headers, titles, and formatting, MUST be translated into ${language}. It is CRITICAL that you translate ALL headers, such as SUMMARY, IDEAS, QUOTES, TAKEAWAYS, MAIN POINTS, etc., into ${language}. Maintain markdown formatting in the response. Do not output any English headers.`
: '';
const finalSystemPrompt = languageInstruction + (systemPromptText ?? get(systemPrompt));
const finalUserInput = language !== 'en'
? `${userInput}\n\nIMPORTANT: Respond in ${language} language only.`
: userInput;
@@ -183,13 +183,14 @@ export class ChatService {
systemPrompt: finalSystemPrompt,
model: config.model,
patternName: get(selectedPatternName),
strategyName: get(selectedStrategy) // Add selected strategy to prompt
strategyName: get(selectedStrategy), // Add selected strategy to prompt
variables: get(patternVariables) // Add pattern variables
};
}
public async createChatRequest(userInput: string, systemPromptText?: string, isPattern: boolean = false): Promise<ChatRequest> {
@@ -221,16 +222,16 @@ export class ChatService {
onError: (error: Error) => void
): Promise<void> {
const reader = stream.getReader();
try {
while (true) {
const { done, value } = await reader.read();
if (done) break;
if (value.type === 'error') {
throw new ChatError(value.content, 'STREAM_CONTENT_ERROR');
}
if (value.type === 'content') {
onContent(value.content, value);
}
@@ -239,11 +240,11 @@ export class ChatService {
onError(error instanceof ChatError ? error : new ChatError('Stream processing error', 'STREAM_ERROR', error));
} finally {
reader.releaseLock();
}
}
}

11
web/src/lib/store/pattern-store.ts
View File

@@ -15,11 +15,11 @@ export const patterns = derived(
return $allPatterns.filter(p => {
// Keep all patterns if no language is selected
if (!$language) return true;
// Check if pattern has a language prefix (e.g., en_, fr_)
const match = p.Name.match(/^([a-z]{2})_/);
if (!match) return true; // Keep patterns without language prefix
// Only filter out patterns that have a different language prefix
const patternLang = match[1];
return patternLang === $language;
@@ -30,6 +30,9 @@ export const patterns = derived(
export const systemPrompt = writable<string>('');
export const selectedPatternName = writable<string>('');
// Pattern variables store
export const patternVariables = writable<Record<string, string>>({});
export const setSystemPrompt = (prompt: string) => {
console.log('Setting system prompt:', prompt);
systemPrompt.set(prompt);
@@ -60,13 +63,13 @@ export const patternAPI = {
const patternResponse = await fetch(`/api/patterns/${pattern}`);
const patternData = await patternResponse.json();
console.log(`Pattern ${pattern} content length:`, patternData.Pattern?.length || 0);
// Find matching description from JSON
const desc = descriptions.find(d => d.patternName === pattern);
if (!desc) {
console.warn(`No description found for pattern: ${pattern}`);
}
return {
Name: pattern,
Description: desc?.description || pattern.charAt(0).toUpperCase() + pattern.slice(1),