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) {
this.messageElement.innerHTML = '';
const callbacks: StreamCallbacks = {
onChunk: (chunk: string) => {
this.messageElement.innerHTML += chunk;
this.messageElement.scrollIntoView();
},
onMessageObject: (messageObj: any) => {
if (messageObj.image_urls) {
this.displayImages(messageObj.image_urls);
}
},
onComplete: (message: any) => {
console.log('संदेश पूर्ण:', message);
this.finalizeMessage(message);
},
onError: (error: Error) => {
console.error('स्ट्रीमिंग त्रुटि:', error);
this.messageElement.innerHTML = `त्रुटि: ${error.message}`;
},
onChatNameUpdate: (chatName: string) => {
document.title = chatName;
}
};
try {
await this.chatSDK.sendMessageStream(message, {
chatId,
modelName: 'gpt-4o',
useKnowledgebase: true,
...callbacks
});
} catch (error) {
console.error('स्ट्रीमिंग संदेश भेजने में विफल:', 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) {
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('प्रतिक्रिया सफलतापूर्वक भेजी गई');
} catch (error) {
console.error('प्रतिक्रिया भेजने में विफल:', error);
}
}
}