Chat

import '@blukavantui/web/theme.css'

import {createChat, type BluChatMessage} from '@blukavantui/web/chat';
import '@blukavantui/web/chat.css';
export function mount(host:HTMLElement) {
  const stage=document.createElement('div');
  stage.style.cssText='position:relative;container-type:inline-size;width:100%;min-width:0;';
  const hint=document.createElement('p');hint.textContent='Local demonstration. Connect your own assistant through Send, Retry and Stop.';
  host.append(stage,hint);
  let messages:BluChatMessage[]=[],timer:ReturnType<typeof setTimeout>|undefined,active='',dead=false;
  const chat=createChat(stage,{Title:'BluKavantUI assistant',Messages:messages,Suggestions:[
    {Key:'start',Label:'What can you do?',Text:'What can you do?'},
    {Key:'connect',Label:'Connect my assistant',Text:'How do I connect an assistant?'},
  ],Animate:true,Height:520}, {
    Send:(id,text)=>respond(id,text,false),Retry:(id,text)=>respond(id,text,true),
    Stop:()=>{active='';clearTimeout(timer);},
  });
  function respond(id:string,text:string,retry:boolean) {
    active=id;clearTimeout(timer);
    if(!retry)messages=[...messages,{Key:id+'-user',Role:'User',Content:text}];
    chat.update({Messages:messages,Status:'Waiting',ResponseRequestId:id});
    // Replace this sample timer with your application transport. Keep server API
    // credentials on the server. Echo this request ID on every response update.
    const answer='This is a **local demo response**. Your app can supply messages from any assistant.\n\n- Streaming updates\n- Stop and retry\n- The same UI on web and OutSystems';
    const reply:BluChatMessage={Key:id+'-assistant',Role:'Assistant',Content:''};
    let offset=0;
    timer=setTimeout(function tick(){
      if(dead||active!==id)return;
      if(!offset)messages=[...messages,reply];
      offset+=12;reply.Content=answer.slice(0,offset);
      chat.update({Messages:[...messages],Status:offset>=answer.length?'Idle':'Streaming',ResponseRequestId:id});
      if(offset<answer.length)timer=setTimeout(tick,55);
    },500);
  }
  return {destroy(){dead=true;active='';clearTimeout(timer);chat.destroy();stage.remove();hint.remove();}};
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()