Use type `ChatCompletionInputMessage` from hfjs/tasks

package.json

@@ -32,6 +32,7 @@
 	"dependencies": {
 		"@huggingface/hub": "^0.15.1",
 		"@huggingface/inference": "^2.7.0",
+		"@huggingface/tasks": "^0.10.22",
 		"@tailwindcss/container-queries": "^0.1.1"
 	}
 }

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@huggingface/inference':
     specifier: ^2.7.0
     version: 2.7.0
+  '@huggingface/tasks':
+    specifier: ^0.10.22
+    version: 0.10.22
   '@tailwindcss/container-queries':
     specifier: ^0.1.1
     version: 0.1.1([email protected])
@@ -287,7 +290,7 @@ packages:
     resolution: {integrity: sha512-uHb4aFkJDoGfLeRHfFTjkI36Z8IV6Z1c+KzhMDqUSC56opyr7Mn1Nsx7Rri/C7KDwROhQfBp/fOOqqjTzn6Cgg==}
     engines: {node: '>=18'}
     dependencies:
-      '@huggingface/tasks': 0.10.19
+      '@huggingface/tasks': 0.10.22
       hash-wasm: 4.11.0
     dev: false
 
@@ -295,11 +298,11 @@ packages:
     resolution: {integrity: sha512-u7Fn637Q3f7nUB1tajM4CgzhvoFQkOQr5W5Fm+2wT9ETgGoLBh25BLlYPTJRjAd2WY01s71v0lqAwNvHHCc3mg==}
     engines: {node: '>=18'}
     dependencies:
-      '@huggingface/tasks': 0.10.19
+      '@huggingface/tasks': 0.10.22
     dev: false
 
-  /@huggingface/[email protected].19:
-    resolution: {integrity: sha512-JnfdySzAXNvuL8q0QUt1952cebwcpTjUKt8Hq80OSksY5l8hTpN2OcBpjrJ3Zk91mQnqVNJ9LS3B7RfCQ7kW/A==}
+  /@huggingface/[email protected].22:
+    resolution: {integrity: sha512-sCtp+A6sq6NXoUU7NXuXWoVNNjKddk1GTQIh3cJ6illF8S4zmFoerCVRvFf19BdgICGvF+RVZiv9sGGK9KRDTg==}
     dev: false
 
   /@isaacs/[email protected]:

src/lib/components/Playground/Playground.svelte

@@ -12,10 +12,12 @@
 	import PlaygroundModelSelector from './PlaygroundModelSelector.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import { type ModelEntry } from "@huggingface/hub";
+	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+
 
 	let compatibleModels: ModelEntry[] = [];
 
-	const startMessages: Message[] = [{ role: 'user', content: '' }];
+	const startMessages: ChatCompletionInputMessage[] = [{ role: 'user', content: '' }];
 
 	let conversations: Conversation[] = [
 		{
@@ -31,14 +33,14 @@
 	}
 
 	let currentConversation = conversations[0];
-	let systemMessage: Message = { role: 'system', content: '' };
+	let systemMessage: ChatCompletionInputMessage = { role: 'system', content: '' };
 	$: messages = currentConversation.messages;
 
 	let hfToken: string | null = import.meta.env.VITE_HF_TOKEN;
 	let viewCode = false;
 	let showTokenModal = false;
 	let loading = false;
-	let streamingMessage: Message | null = null;
+	let streamingMessage: ChatCompletionInputMessage | null = null;
 	let tokens = 0;
 	let latency = 0;
 	let messageContainer: HTMLDivElement | null = null;

src/lib/components/Playground/PlaygroundCode.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+
 	export let model: string;
 	export let streaming: Boolean;
 	export let temperature: number;
 	export let maxTokens: number;
-	export let messages: Message[];
+	export let messages: ChatCompletionInputMessage[];
 
 	$: console.log(messages);
 

src/lib/components/Playground/PlaygroundMessage.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
 
-	type Message = {
-		role: 'user' | 'assistant';
-		content: string;
-	};
-
-	export let message: Message;
+	export let message: ChatCompletionInputMessage;
 	export let autofocus: boolean = false;
 
 	const dispatch = createEventDispatcher();

src/lib/components/Playground/playgroundUtils.ts

@@ -1,22 +1,18 @@
+import { type ChatCompletionInputMessage } from "@huggingface/tasks";
 import { HfInference } from '@huggingface/inference';
 
-export interface Message {
-	role: string;
-	content: string;
-}
-
 export function createHfInference(token: string): HfInference {
 	return new HfInference(token);
 }
 
-export function prepareRequestMessages(systemMessage: Message, messages: Message[]): Message[] {
+export function prepareRequestMessages(systemMessage: ChatCompletionInputMessage, messages: ChatCompletionInputMessage[]): ChatCompletionInputMessage[] {
 	return [...(systemMessage.content.length ? [systemMessage] : []), ...messages];
 }
 
 export async function handleStreamingResponse(
 	hf: HfInference,
 	model: string,
-	messages: Message[],
+	messages: ChatCompletionInputMessage[],
 	temperature: number,
 	maxTokens: number,
 	jsonMode: boolean,
@@ -49,11 +45,11 @@ export async function handleStreamingResponse(
 export async function handleNonStreamingResponse(
 	hf: HfInference,
 	model: string,
-	messages: Message[],
+	messages: ChatCompletionInputMessage[],
 	temperature: number,
 	maxTokens: number,
 	jsonMode: boolean
-): Promise<Message> {
+): Promise<ChatCompletionInputMessage> {
 	const response = await hf.chatCompletion({
 		model: model,
 		messages: messages,

src/lib/types/index.d.ts

@@ -1,9 +1,5 @@
 import type { ModelEntry } from "@huggingface/hub";
-
-type Message = {
-	role: string;
-	content: string;
-};
+import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
 type Model = string;
 
@@ -18,5 +14,5 @@ type Conversation = {
 	id: string;
 	model: ModelEntry;
 	config: ModelConfig;
-	messages: Message[];
+	messages: ChatCompletionInputMessage[];
 };