Topic.tsx

import React, { Fragment, useEffect, useState } from 'react';
import './Widget.css';

import { MediumContent, LargeContent, useTextKitWidget, WidgetViewSize } from '@statflo/textkit-widget-sdk-react'

const Widget = () => {
    const [hasMounted, setHasMounted] = useState(false);
    
    useEffect(() => {
        setHasMounted(true);
    }, []);
    
    const { state, setHeader, setSize } = hasMounted && useTextKitWidget();
            
    const [previousState, setPreviousState] = useState<any>(false);
    const [headerReplaced, setHeaderReplaced] = useState<boolean>(false);
    const [conversation, setConversation] = useState<any>(false);
    const [loading, setLoading] = useState<boolean>(false);
    const [showContext, setShowContext] = useState<boolean>(false);

    const swapHeader = () => {
        if (headerReplaced) {
            setHeader('What to Discuss');
            setHeaderReplaced(false);
        } else {
            setHeader('New Title');
            setHeaderReplaced(true);
        }
    }

    const swapShowContext = () => {
        if (showContext) {
            setShowContext(false);
        } else {
            setShowContext(true);
        }
    }

    useEffect(() => {
        if (state && state?.context && state !== previousState) {
            if (!conversation) { setLoading(true) }
            fetch(`/api/context?conversation=${state?.context?.conversationId}`,{
                method: 'get',
                headers: {
                  'Content-Type': 'application/json'
                }
              })
              .then( async (res) => {
                const result = await res.json()
                 setConversation(result.context);     
                 setPreviousState(state);     
                 setLoading(false);
              })
        }
    }, [state]);

    const closeWidget = () => {
        setSize(WidgetViewSize.Medium);
    }

    return (
            <Fragment>
                <MediumContent>
                    <div className='widget-container'>
                        
                      {!loading ? <>
                        <h1 className='widget-title'>
                          {conversation.detail && (<>{conversation.detail.topics[0]?.topicName}</>)}
                                
                        </h1>

                        {conversation.detail && (<p className='widget-copy'>{conversation.detail.topics[0]?.topicDescription}</p>)}
                       </> : <>
                        <p className='widget-copy'>...</p>
                       </>}
                      
                    </div>
                </MediumContent>
                <LargeContent>
                    <div className='widget-container' style={{ height: state ? state?.maxHeight : 100 }}>
                        <div className='widget-flex-container'>
                            
                            <h1 className='widget-title'>
                                Expanded Self-Hosted App Sample
                            </h1>
                            
                             <>
                              <p><br/>Sentiment: <strong>{
                                  (conversation.detail?.messages[0]?.body.includes("great") || 
                                  conversation.detail?.messages[0]?.body.includes("cool") ||
                                  conversation.detail?.messages[0]?.body.includes("awesome") || 
                                  conversation.detail?.messages[0]?.body.includes("love it") || 
                                  conversation.detail?.messages[0]?.body.includes("loving") || 
                                  conversation.detail?.messages[0]?.body.includes("good")) ? 'positive' : (
                                  conversation.detail?.messages[0]?.body.includes("hate it") || 
                                  conversation.detail?.messages[0]?.body.includes("hate you") || 
                                  conversation.detail?.messages[0]?.body.includes("shut up") || 
                                  conversation.detail?.messages[0]?.body.includes("not going") || 
                                  conversation.detail?.messages[0]?.body.includes("wont") || 
                                  conversation.detail?.messages[0]?.body.includes("fuck") || 
                                  conversation.detail?.messages[0]?.body.includes("shut off") ||
                                  conversation.detail?.messages[0]?.body.includes("shut down") ||
                                  conversation.detail?.messages[0]?.body.includes("cancel") ||
                                  conversation.detail?.messages[0]?.body.includes("stupid") || 
                                  conversation.detail?.messages[0]?.body.includes("shit") || 
                                  conversation.detail?.messages[0]?.body.includes("sucks")) ? 'negative' : 'neutral'
                                }</strong>
                                <br/><br/>
                              </p>

                              <p onClick={swapShowContext} className='widget-copy'>{showContext ? 'Hide Context' : 'Show Advanced Context'}</p>
                            
                             </>
                            
                            
                            {showContext && state && conversation (
                            <div>
                                <p className='widget-copy'>contact.externalId:<br/>{state?.context?.external?.externalId}</p>
                                <p className='widget-copy'>contact.metadata:<br/>{state?.context?.external?.metadata}</p>
                                
                                <p className='widget-copy'>conversation.topic.id:<br/>{state?.context?.campaignId}</p>
                                <p className='widget-copy'>conversation.category:<br/>{conversation?.category}</p>
                                <p className='widget-copy'>conversation.previous_category:<br/>{conversation?.previous_category}</p>
                                <p className='widget-copy'>conversation.created_at:<br/>{conversation?.created_at}</p>
                                {conversation?.last_message_received_at && (<p className='widget-copy'>conversation.last_message_received_at:<br/>{conversation?.last_message_received_at}</p>)}
                                <p className='widget-copy'>conversation.topic_active:<br/>{conversation?.topic_active?'true':'false'}</p>
                                <p className='widget-copy'>conversation.topic_in_range:<br/>{conversation?.topic_in_range?'true':'false'}</p>

                                <p className='widget-copy'>detail.is_inbound:<br/>{conversation.detail?.is_inbound?'true':'false'}</p>
                                <p className='widget-copy'>detail.channel:<br/>{conversation.detail?.channel}</p>
                                <p className='widget-copy'>detail.representative_id:<br/>{conversation.detail?.representative_id}</p>

                                {conversation.detail?.messages?.length > 0 && (<p className='widget-copy'>detail.messages.last:<br/>{conversation.detail?.messages[0]?.body}</p>)}
                                <p className='widget-copy'>detail.topic.name:<br/>{conversation.detail?.topics[0]?.topicName}</p>
                                <p className='widget-copy'>detail.topic.description:<br/>{conversation.detail?.topics[0]?.topicDescription}</p>

                                <p className='widget-copy'>detail.participation.end_at:<br/>{conversation.detail.topic_participations[0]?.ends_at}</p>
                                <p className='widget-copy'>detail.participation.metadata:<br/>{JSON.stringify(conversation.detail?.topic_participations[0]?.metadata)}</p>

                                
                            </div>
                            )}
                            
                        </div>
                        <div className='widget-flex-container'>
                        
                        </div>
                        <div className='widget-action-bar'>
                            <button onClick={closeWidget} className='widget-cancel'>Cancel</button>
                            <button onClick={swapHeader} className='widget-button'>Change Header</button>
                        </div>
                    </div>
                </LargeContent>
            </Fragment>
        )
}

export default Widget;