windmill-components 1.408.1 → 1.430.2

package/package/components/copilot/completion.d.ts

@@ -1 +1,2 @@
-export declare function editorCodeCompletion(before: string, after: string, lang: string, abortController: AbortController): Promise<string | undefined>;
+import { type AiProviderTypes } from './lib';
+export declare function editorCodeCompletion(before: string, after: string, lang: string, abortController: AbortController, aiProvider: AiProviderTypes): Promise<string | undefined>;

package/package/components/copilot/completion.js

@@ -66,7 +66,7 @@ const prompt = `\`\`\`{language}
 {before}<completion_tokens>{after}
 \`\`\`
 `;
-export async function editorCodeCompletion(before, after, lang, abortController) {
+export async function editorCodeCompletion(before, after, lang, abortController, aiProvider) {
     codeCompletionLoading.set(true);
     const messages = [
         {
@@ -82,7 +82,7 @@ export async function editorCodeCompletion(before, after, lang, abortController)
         }
     ];
     try {
-        const result = await getNonStreamingCompletion(messages, abortController);
+        const result = await getNonStreamingCompletion(messages, abortController, aiProvider);
         const match = result.match(/```[a-zA-Z]+\n([\s\S]*?)\n```/);
         let completion = match?.[1] || '';
         return completion;

package/package/components/copilot/flow.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="svelte" />
 import { type FlowModule, type RawScript, type PathScript, type InputTransform } from '../../gen';
+import { type AiProviderTypes } from './lib';
 import type { Writable } from 'svelte/store';
 import type Editor from '../Editor.svelte';
 import type { Drawer } from '../common';
@@ -46,10 +47,10 @@ export type FlowCopilotContext = {
 };
 export declare function stepCopilot(module: FlowCopilotModule, deltaCodeStore: Writable<string>, workspace: string, pastModule: (FlowModule & {
     value: RawScript | PathScript;
-}) | undefined, isFirstInLoop: boolean, abortController: AbortController): Promise<string>;
+}) | undefined, isFirstInLoop: boolean, abortController: AbortController, aiProvider: AiProviderTypes): Promise<string>;
 export declare function glueCopilot(inputs: Record<string, InputTransform>, workspace: string, pastModule: FlowModule & {
     value: RawScript | PathScript;
-}, isFirstInLoop: boolean, abortController: AbortController): Promise<{
+}, isFirstInLoop: boolean, abortController: AbortController, aiProvider: AiProviderTypes): Promise<{
     inputs: Record<string, string>;
     allExprs: Record<string, string>;
 }>;

package/package/components/copilot/flow.js

@@ -61,7 +61,7 @@ To maintain state across runs, you can use get_state() and set_state(value) whic
 // 			headers: Record<string, string>
 // 		}
 // 	},
-// 	/* your other args */ 
+// 	/* your other args */
 // ) {
 // 	return {
 // 		// return the args to be passed to the flow
@@ -156,7 +156,7 @@ async function getPreviousStepContent(pastModule, workspace) {
         }
     }
 }
-export async function stepCopilot(module, deltaCodeStore, workspace, pastModule, isFirstInLoop, abortController) {
+export async function stepCopilot(module, deltaCodeStore, workspace, pastModule, isFirstInLoop, abortController, aiProvider) {
     if (module.source !== 'custom') {
         throw new Error('Not a custom module');
     }
@@ -164,13 +164,13 @@ export async function stepCopilot(module, deltaCodeStore, workspace, pastModule,
     const codeLang = lang === 'python3' ? 'python' : 'typescript (Node.js)';
     let prompt = module.type === 'trigger'
         ? triggerPrompts[lang]
-        // : module.type === 'preprocessor'
-        // 	? preprocessorPrompts[lang]
-        : pastModule === undefined
-            ? firstActionPrompt
-            : isFirstInLoop
-                ? loopActionPrompt
-                : actionPrompt;
+        : // : module.type === 'preprocessor'
+            // 	? preprocessorPrompts[lang]
+            pastModule === undefined
+                ? firstActionPrompt
+                : isFirstInLoop
+                    ? loopActionPrompt
+                    : actionPrompt;
     const { prevCode, prevLang } = pastModule
         ? await getPreviousStepContent(pastModule, workspace)
         : { prevCode: undefined, prevLang: undefined };
@@ -199,10 +199,10 @@ export async function stepCopilot(module, deltaCodeStore, workspace, pastModule,
             role: 'user',
             content: prompt
         }
-    ], deltaCodeStore, abortController);
+    ], deltaCodeStore, abortController, aiProvider);
     return code;
 }
-export async function glueCopilot(inputs, workspace, pastModule, isFirstInLoop, abortController) {
+export async function glueCopilot(inputs, workspace, pastModule, isFirstInLoop, abortController, aiProvider) {
     const { prevCode, prevLang } = await getPreviousStepContent(pastModule, workspace);
     const stringInputs = [];
     for (const inputName in inputs) {
@@ -228,7 +228,7 @@ export async function glueCopilot(inputs, workspace, pastModule, isFirstInLoop,
                 .replace('{prevCode}', prevCode)
                 .replace('{codeLang}', scriptLangToEditorLang(prevLang)))
         }
-    ], abortController);
+    ], abortController, aiProvider);
     const matches = response.matchAll(/([a-zA-Z_0-9.]+): (.+)/g);
     const result = {};
     const allExprs = {};

package/package/components/copilot/lib.d.ts

@@ -2,19 +2,64 @@
 import { OpenAI } from 'openai';
 import { type Script } from '../../gen';
 import type { Writable } from 'svelte/store';
+import { Anthropic } from '@anthropic-ai/sdk';
 import type { DBSchema, GraphqlSchema, SQLSchema } from '../../stores';
-import type { ChatCompletionMessageParam } from 'openai/resources/index.mjs';
+import { Mistral } from '@mistralai/mistralai';
+import type { ChatCompletionCreateParamsStreaming, ChatCompletionMessageParam } from 'openai/resources/index.mjs';
+import type { MessageCreateParams, MessageParam } from '@anthropic-ai/sdk/resources/messages.mjs';
+import type { ChatCompletionRequest } from '@mistralai/mistralai/models/components/chatcompletionrequest';
+import type { SystemMessage, UserMessage, AssistantMessage, ToolMessage, CompletionEvent, ContentChunk } from '@mistralai/mistralai/models/components';
 export declare const SUPPORTED_LANGUAGES: Set<string>;
-declare class WorkspacedOpenai {
+export type AiProviderTypes = 'openai' | 'anthropic' | 'mistral';
+interface AiProvider {
+    init: (workspace: string, updateClient: boolean, token?: string) => void;
+}
+declare class WorkspacedMistral implements AiProvider {
+    private client;
+    init(workspace: string, updateClient: boolean, token?: string): void;
+    getClient(): Mistral;
+}
+export declare namespace MistralAi {
+    let workspace: WorkspacedMistral;
+    const mistralConfig: ChatCompletionRequest;
+    type MistralParamsMessage = (SystemMessage & {
+        role: 'system';
+    }) | (UserMessage & {
+        role: 'user';
+    }) | (AssistantMessage & {
+        role: 'assistant';
+    }) | (ToolMessage & {
+        role: 'tool';
+    });
+    function retrieveTextValue(chunks: string | ContentChunk[] | null | undefined): string;
+}
+declare class WorkspacedAnthropic implements AiProvider {
     private client;
-    init(workspace: string, token?: string | undefined): void;
+    init(workspace: string, updateClient: boolean, token?: string | undefined): void;
+    getClient(): Anthropic;
+}
+export declare namespace AnthropicAi {
+    let workspace: WorkspacedAnthropic;
+    const config: MessageCreateParams;
+    function getSystemPromptAndArrayMessages(messages: ChatCompletionMessageParam[]): [string, MessageParam[]];
+    function retrieveTextValue(part: Anthropic.Messages.RawMessageStreamEvent): string;
+}
+declare class WorkspacedOpenai implements AiProvider {
+    private client;
+    init(workspace: string, updateClient: boolean, token?: string | undefined): void;
     getClient(): OpenAI;
 }
-export declare let workspacedOpenai: WorkspacedOpenai;
-export declare function testKey({ apiKey, abortController, messages }: {
+export declare namespace OpenAi {
+    let workspace: WorkspacedOpenai;
+    const openaiConfig: ChatCompletionCreateParamsStreaming;
+    function retrieveTextValue(part: OpenAI.Chat.Completions.ChatCompletionChunk): string;
+}
+export declare function initAllAiWorkspace(workspace: string, updateClient?: boolean): void;
+export declare function testKey({ apiKey, abortController, messages, aiProvider }: {
     apiKey?: string;
     messages: ChatCompletionMessageParam[];
     abortController: AbortController;
+    aiProvider: AiProviderTypes;
 }): Promise<void>;
 interface BaseOptions {
     language: Script['language'] | 'frontend' | 'transformer';
@@ -40,8 +85,9 @@ export declare function addResourceTypes(scriptOptions: CopilotOptions, prompt:
 export declare const MAX_SCHEMA_LENGTH: number;
 export declare function addThousandsSeparator(n: number): string;
 export declare function stringifySchema(dbSchema: Omit<SQLSchema, 'stringified'> | Omit<GraphqlSchema, 'stringified'>): string;
-export declare function getNonStreamingCompletion(messages: ChatCompletionMessageParam[], abortController: AbortController, model?: any, noCache?: boolean): Promise<string>;
-export declare function getCompletion(messages: ChatCompletionMessageParam[], abortController: AbortController, model?: any): Promise<OpenAI.Chat.Completions.ChatCompletion>;
-export declare function copilot(scriptOptions: CopilotOptions, generatedCode: Writable<string>, abortController: AbortController, generatedExplanation?: Writable<string>): Promise<string>;
-export declare function deltaCodeCompletion(messages: ChatCompletionMessageParam[], generatedCodeDelta: Writable<string>, abortController: AbortController): Promise<string>;
+export declare function getNonStreamingCompletion(messages: ChatCompletionMessageParam[], abortController: AbortController, aiProvider: AiProviderTypes, model?: any, noCache?: boolean): Promise<string>;
+export declare function getCompletion(messages: ChatCompletionMessageParam[], abortController: AbortController, aiProvider: AiProviderTypes, model?: any): Promise<OpenAI.Chat.Completions.ChatCompletion | Anthropic.Messages.Message | import("@mistralai/mistralai/lib/event-streams").EventStream<CompletionEvent>>;
+export declare function getResponseFromEvent(part: Anthropic.Messages.RawMessageStreamEvent | OpenAI.Chat.Completions.ChatCompletionChunk | CompletionEvent, aiProvider: AiProviderTypes): string;
+export declare function copilot(scriptOptions: CopilotOptions, generatedCode: Writable<string>, abortController: AbortController, aiProvider: AiProviderTypes, generatedExplanation?: Writable<string>): Promise<string>;
+export declare function deltaCodeCompletion(messages: ChatCompletionMessageParam[], generatedCodeDelta: Writable<string>, abortController: AbortController, aiProvider: AiProviderTypes): Promise<string>;
 export {};

package/package/components/copilot/lib.js

@@ -1,29 +1,106 @@
 import { OpenAI } from 'openai';
 import { OpenAPI, ResourceService } from '../../gen';
+import { Anthropic } from '@anthropic-ai/sdk';
 import { formatResourceTypes } from './utils';
 import { EDIT_CONFIG, FIX_CONFIG, GEN_CONFIG } from './prompts';
+import { Mistral } from '@mistralai/mistralai';
 import { buildClientSchema, printSchema } from 'graphql';
 export const SUPPORTED_LANGUAGES = new Set(Object.keys(GEN_CONFIG.prompts));
-const openaiConfig = {
-    temperature: 0,
-    max_tokens: 16384,
-    model: 'gpt-4o-2024-08-06',
-    seed: 42,
-    stream: true,
-    messages: []
-};
-class WorkspacedOpenai {
+class WorkspacedMistral {
     client;
-    init(workspace, token = undefined) {
-        const baseURL = `${location.origin}${OpenAPI.BASE}/w/${workspace}/openai/proxy`;
-        this.client = new OpenAI({
-            baseURL,
-            apiKey: 'fakekey',
-            defaultHeaders: {
-                Authorization: token ? `Bearer ${token}` : ''
-            },
-            dangerouslyAllowBrowser: true
+    init(workspace, updateClient, token) {
+        if (!this.client || updateClient) {
+            this.client = initWorkspaceAiProvider(workspace, 'mistral', token);
+        }
+    }
+    getClient() {
+        if (!this.client) {
+            throw new Error('AnthropicAi not initialized');
+        }
+        return this.client;
+    }
+}
+export var MistralAi;
+(function (MistralAi) {
+    MistralAi.workspace = new WorkspacedMistral();
+    MistralAi.mistralConfig = {
+        temperature: 0,
+        model: null,
+        maxTokens: 32000,
+        messages: []
+    };
+    function retrieveTextValue(chunks) {
+        let response = '';
+        if (Array.isArray(chunks)) {
+            for (const chunk of chunks) {
+                if (chunk.type === 'text') {
+                    response += chunk.text;
+                }
+            }
+            return response;
+        }
+        return chunks;
+    }
+    MistralAi.retrieveTextValue = retrieveTextValue;
+})(MistralAi || (MistralAi = {}));
+class WorkspacedAnthropic {
+    client;
+    init(workspace, updateClient, token = undefined) {
+        if (!this.client || updateClient) {
+            this.client = initWorkspaceAiProvider(workspace, 'anthropic', token);
+        }
+    }
+    getClient() {
+        if (!this.client) {
+            throw new Error('AnthropicAi not initialized');
+        }
+        return this.client;
+    }
+}
+export var AnthropicAi;
+(function (AnthropicAi) {
+    AnthropicAi.workspace = new WorkspacedAnthropic();
+    AnthropicAi.config = {
+        temperature: 0,
+        max_tokens: 8192,
+        model: 'claude-3-5-sonnet-20241022',
+        messages: []
+    };
+    function getSystemPromptAndArrayMessages(messages) {
+        let system = undefined;
+        if (messages[0].role == 'system') {
+            system = messages[0].content;
+            messages.shift();
+        }
+        const anthropicMessages = messages.map((message) => {
+            return {
+                role: message.role == 'user' ? 'user' : 'assistant',
+                content: message.content
+            };
         });
+        return [system, anthropicMessages ?? []];
+    }
+    AnthropicAi.getSystemPromptAndArrayMessages = getSystemPromptAndArrayMessages;
+    function retrieveTextValue(part) {
+        let response = '';
+        if (part.type == 'content_block_delta') {
+            if (part.delta.type == 'text_delta') {
+                response = part.delta.text;
+            }
+            else {
+                response = part.delta.partial_json;
+            }
+        }
+        return response;
+    }
+    AnthropicAi.retrieveTextValue = retrieveTextValue;
+})(AnthropicAi || (AnthropicAi = {}));
+class WorkspacedOpenai {
+    client;
+    init(workspace, updateClient, token = undefined) {
+        if (!this.client || updateClient) {
+            this.client = initWorkspaceAiProvider(workspace, 'openai', token);
+        }
     }
     getClient() {
         if (!this.client) {
@@ -32,23 +109,116 @@ class WorkspacedOpenai {
         return this.client;
     }
 }
-export let workspacedOpenai = new WorkspacedOpenai();
-export async function testKey({ apiKey, abortController, messages }) {
+export var OpenAi;
+(function (OpenAi) {
+    OpenAi.workspace = new WorkspacedOpenai();
+    OpenAi.openaiConfig = {
+        temperature: 0,
+        max_tokens: 16384,
+        model: 'gpt-4o-2024-08-06',
+        seed: 42,
+        stream: true,
+        messages: []
+    };
+    function retrieveTextValue(part) {
+        return part.choices[0]?.delta?.content || '';
+    }
+    OpenAi.retrieveTextValue = retrieveTextValue;
+})(OpenAi || (OpenAi = {}));
+export function initAllAiWorkspace(workspace, updateClient = false) {
+    OpenAi.workspace.init(workspace, updateClient);
+    AnthropicAi.workspace.init(workspace, updateClient);
+    MistralAi.workspace.init(workspace, updateClient);
+}
+function initWorkspaceAiProvider(workspace, aiProvider, token = undefined) {
+    const baseURL = `${location.origin}${OpenAPI.BASE}/w/${workspace}/ai/proxy`;
+    let client;
+    switch (aiProvider) {
+        case 'openai': {
+            client = new OpenAI({
+                baseURL,
+                apiKey: 'fake-key',
+                defaultHeaders: {
+                    Authorization: token ? `Bearer ${token}` : ''
+                },
+                dangerouslyAllowBrowser: true
+            });
+            break;
+        }
+        case 'anthropic': {
+            client = new Anthropic({
+                baseURL,
+                apiKey: 'fake-key',
+                defaultHeaders: {
+                    Authorization: token ? `Bearer ${token}` : ''
+                },
+                dangerouslyAllowBrowser: true
+            });
+            break;
+        }
+        case 'mistral': {
+            client = new Mistral({
+                serverURL: baseURL
+            });
+        }
+    }
+    return client;
+}
+export async function testKey({ apiKey, abortController, messages, aiProvider }) {
     if (apiKey) {
-        const openai = new OpenAI({
-            apiKey,
-            dangerouslyAllowBrowser: true
-        });
-        await openai.chat.completions.create({
-            ...openaiConfig,
-            messages,
-            stream: false
-        }, {
-            signal: abortController.signal
-        });
+        switch (aiProvider) {
+            case 'openai': {
+                const openai = new OpenAI({
+                    apiKey,
+                    dangerouslyAllowBrowser: true
+                });
+                await openai.chat.completions.create({
+                    ...OpenAi.openaiConfig,
+                    messages,
+                    stream: false
+                }, {
+                    signal: abortController.signal
+                });
+                break;
+            }
+            case 'anthropic': {
+                const anthropic = new Anthropic({
+                    apiKey,
+                    dangerouslyAllowBrowser: true
+                });
+                const [, anthropicMessages] = AnthropicAi.getSystemPromptAndArrayMessages(messages);
+                await anthropic.messages.create({
+                    ...AnthropicAi.config,
+                    messages: anthropicMessages,
+                    stream: false
+                }, {
+                    signal: abortController.signal
+                });
+                break;
+            }
+            case 'mistral': {
+                const mistral = new Mistral({
+                    apiKey
+                });
+                await mistral.chat.complete({
+                    ...MistralAi.mistralConfig,
+                    model: 'codestral-latest',
+                    stream: false,
+                    messages: messages
+                }, {
+                    fetchOptions: {
+                        signal: abortController.signal,
+                        headers: {
+                            'content-type': 'application/json'
+                        }
+                    }
+                });
+                break;
+            }
+        }
     }
     else {
-        await getNonStreamingCompletion(messages, abortController, undefined, true);
+        await getNonStreamingCompletion(messages, abortController, aiProvider, undefined, true);
     }
 }
 async function getResourceTypes(scriptOptions) {
@@ -170,37 +340,114 @@ const PROMPTS_CONFIGS = {
     edit: EDIT_CONFIG,
     gen: GEN_CONFIG
 };
-export async function getNonStreamingCompletion(messages, abortController, model = openaiConfig.model, noCache) {
-    const openaiClient = workspacedOpenai.getClient();
-    const completion = await openaiClient.chat.completions.create({
-        ...openaiConfig,
-        messages,
-        stream: false,
-        model
-    }, {
+export async function getNonStreamingCompletion(messages, abortController, aiProvider, model = OpenAi.openaiConfig.model, noCache) {
+    let response = '';
+    const queryOptions = {
         query: {
             no_cache: noCache
         },
         signal: abortController.signal
-    });
-    // if (completion.usage) {
-    // 	const { prompt_tokens, completion_tokens } = completion.usage
-    // 	console.log('Cost: ', (prompt_tokens * 0.0015 + completion_tokens * 0.002) / 1000)
-    // }
-    return completion.choices[0]?.message.content || '';
+    };
+    switch (aiProvider) {
+        case 'openai': {
+            const openaiClient = OpenAi.workspace.getClient();
+            const completion = await openaiClient.chat.completions.create({
+                ...OpenAi.openaiConfig,
+                messages,
+                stream: false,
+                model
+            }, queryOptions);
+            response = completion.choices[0]?.message.content || '';
+            break;
+        }
+        case 'anthropic': {
+            const anthropicClient = AnthropicAi.workspace.getClient();
+            const [system, anthropicMessages] = AnthropicAi.getSystemPromptAndArrayMessages(messages);
+            const message = await anthropicClient.messages.create({
+                ...AnthropicAi.config,
+                system,
+                messages: anthropicMessages,
+                stream: false
+            }, queryOptions);
+            response = message.content[0].type === 'text' ? message.content[0].text : '';
+            break;
+        }
+        case 'mistral': {
+            const mistralClient = MistralAi.workspace.getClient();
+            const message = await mistralClient.chat.complete({
+                ...MistralAi.mistralConfig,
+                model: 'codestral-latest',
+                stream: false,
+                messages: messages
+            }, {
+                fetchOptions: {
+                    signal: abortController.signal,
+                    cache: 'no-store'
+                }
+            });
+            response = MistralAi.retrieveTextValue(message.choices && message.choices[0].message.content);
+            break;
+        }
+    }
+    return response;
 }
-export async function getCompletion(messages, abortController, model = openaiConfig.model) {
-    const openaiClient = workspacedOpenai.getClient();
-    const completion = await openaiClient.chat.completions.create({
-        ...openaiConfig,
-        messages,
-        model
-    }, {
-        signal: abortController.signal
-    });
-    return completion;
+export async function getCompletion(messages, abortController, aiProvider, model = OpenAi.openaiConfig.model) {
+    switch (aiProvider) {
+        case 'anthropic': {
+            const anthropicClient = AnthropicAi.workspace.getClient();
+            const [system, anthropicMessages] = AnthropicAi.getSystemPromptAndArrayMessages(messages);
+            const completion = await anthropicClient.messages.create({
+                ...AnthropicAi.config,
+                system,
+                messages: anthropicMessages,
+                stream: true
+            }, { signal: abortController.signal });
+            return completion;
+        }
+        case 'openai': {
+            const openaiClient = OpenAi.workspace.getClient();
+            const completion = await openaiClient.chat.completions.create({
+                ...OpenAi.openaiConfig,
+                messages,
+                model
+            }, {
+                signal: abortController.signal
+            });
+            return completion;
+        }
+        case 'mistral': {
+            const mistralClient = MistralAi.workspace.getClient();
+            const message = await mistralClient.chat.stream({
+                ...MistralAi.mistralConfig,
+                model: 'codestral-latest',
+                messages: messages
+            }, {
+                fetchOptions: {
+                    signal: abortController.signal,
+                    cache: 'no-store'
+                }
+            });
+            return message;
+        }
+    }
+}
+export function getResponseFromEvent(part, aiProvider) {
+    switch (aiProvider) {
+        case 'openai': {
+            const messages = part;
+            return OpenAi.retrieveTextValue(messages);
+        }
+        case 'anthropic': {
+            const messages = part;
+            return AnthropicAi.retrieveTextValue(messages);
+        }
+        case 'mistral': {
+            const messages = part;
+            return MistralAi.retrieveTextValue(messages.data.choices[0].delta.content);
+        }
+    }
 }
-export async function copilot(scriptOptions, generatedCode, abortController, generatedExplanation) {
+export async function copilot(scriptOptions, generatedCode, abortController, aiProvider, generatedExplanation) {
     const { prompt, systemPrompt } = await getPrompts(scriptOptions);
     const completion = await getCompletion([
         {
@@ -211,11 +458,11 @@ export async function copilot(scriptOptions, generatedCode, abortController, gen
             role: 'user',
             content: prompt
         }
-    ], abortController);
+    ], abortController, aiProvider);
     let response = '';
     let code = '';
     for await (const part of completion) {
-        response += part.choices[0]?.delta?.content || '';
+        response += getResponseFromEvent(part, aiProvider);
         let match = response.match(/```[a-zA-Z]+\n([\s\S]*?)\n```/);
         if (match) {
             // if we have a full code block
@@ -263,13 +510,13 @@ export async function copilot(scriptOptions, generatedCode, abortController, gen
 function getStringEndDelta(prev, now) {
     return now.slice(prev.length);
 }
-export async function deltaCodeCompletion(messages, generatedCodeDelta, abortController) {
-    const completion = await getCompletion(messages, abortController);
+export async function deltaCodeCompletion(messages, generatedCodeDelta, abortController, aiProvider) {
+    const completion = await getCompletion(messages, abortController, aiProvider);
     let response = '';
     let code = '';
     let delta = '';
     for await (const part of completion) {
-        response += part.choices[0]?.delta?.content || '';
+        response += getResponseFromEvent(part, aiProvider);
         let match = response.match(/```[a-zA-Z]+\n([\s\S]*?)\n```/);
         if (match) {
             // if we have a full code block

package/package/components/details/ClipboardPanel.svelte

@@ -11,12 +11,12 @@ export let title = undefined;
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="px-2 py-1 border flex items-center cursor-pointer bg-surface-secondary text-primary justify-between rounded-md"
+	class="grow min-w-0 w-full px-2 py-1 border flex items-center cursor-pointer bg-surface-secondary text-primary justify-between rounded-md"
 	on:click={(e) => {
 		e.preventDefault()
 		copyToClipboard(content)
 	}}
 >
-	<div class="text-xs truncate whitespace-pre-wrap w-11/12">{content}</div>
-	<Clipboard size={14} class="w-1/12" />
+	<div class="text-xs truncate whitespace-no-wrap grow">{content}</div>
+	<Clipboard size={12} class="flex-shrink-0" />
 </div>