import { ChatSDK, StreamCallbacks } from '@odin-ai-staging/sdk';
class StreamingChat {
private chatSDK: ChatSDK;
private messageElement: HTMLElement;
constructor(messageElement: HTMLElement) {
this.messageElement = messageElement;
this.chatSDK = new ChatSDK({
baseUrl: 'https://your-api.com/',
projectId: 'your-project-id',
accessToken: 'your-access-token'
});
}
async sendStreamingMessage(message: string, chatId: string) {
// Clear previous content
this.messageElement.innerHTML = '';
const callbacks: StreamCallbacks = {
onChunk: (chunk: string) => {
// Append each chunk to the UI
this.messageElement.innerHTML += chunk;
this.messageElement.scrollIntoView();
},
onMessageObject: (messageObj: any) => {
// Handle structured data like images, cards, etc.
if (messageObj.image_urls) {
this.displayImages(messageObj.image_urls);
}
},
onComplete: (message: any) => {
console.log('Message complete:', message);
// Add final styling, enable feedback buttons, etc.
this.finalizeMessage(message);
},
onError: (error: Error) => {
console.error('Streaming error:', error);
this.messageElement.innerHTML = `Error: ${error.message}`;
},
onChatNameUpdate: (chatName: string) => {
// Update chat title in UI
document.title = chatName;
}
};
try {
await this.chatSDK.sendMessageStream(message, {
chatId,
modelName: 'gpt-4o',
useKnowledgebase: true,
...callbacks
});
} catch (error) {
console.error('Failed to send streaming message:', error);
}
}
private displayImages(imageUrls: string[]) {
imageUrls.forEach(url => {
const img = document.createElement('img');
img.src = url;
img.style.maxWidth = '100%';
this.messageElement.appendChild(img);
});
}
private finalizeMessage(message: any) {
// Add feedback buttons
const feedbackDiv = document.createElement('div');
feedbackDiv.innerHTML = `
<button onclick="this.provideFeedback('${message.id}', true)">👍</button>
<button onclick="this.provideFeedback('${message.id}', false)">👎</button>
`;
this.messageElement.appendChild(feedbackDiv);
}
async provideFeedback(messageId: string, isPositive: boolean) {
try {
await this.chatSDK.sendFeedback(messageId, 'chat_id', isPositive);
console.log('Feedback sent successfully');
} catch (error) {
console.error('Failed to send feedback:', error);
}
}
}