import { PROVIDER } from '@botonic/core'
import merge from 'lodash.merge'
import { forwardRef, useEffect } from 'react'
import { createPortal } from 'react-dom'
import styled from 'styled-components'
import { useWebchat } from './context/use-webchat'
import { SessionView } from './session-view'
import { Webchat } from './webchat'
export const DebugTab = styled.div`
position: fixed;
left: 0;
top: 0;
width: ${props => (props.show ? '350px' : '32px')};
height: ${props => (props.show ? '100%' : '42px')};
`
// We want the debug tab to be rendered in the even if the
// webchat is being rendered in a shadowDOM, that's why we need a portal
export const DebugTabPortal = ({ webchatHooks, ...props }) =>
createPortal(
,
document.body
)
const initialSession = {
is_first_interaction: true,
last_session: {},
user: {
id: '000001',
username: 'johndoe',
name: 'John Doe',
provider: PROVIDER.DEV,
provider_id: '0000000',
extra_data: {},
},
organization: '',
bot: {
id: '0000000',
name: 'botName',
},
}
export const WebchatDev = forwardRef((props, ref) => {
const webchatHooks = useWebchat()
const { webchatState, updateTheme } = webchatHooks
/* TODO: webchatState.theme should be included in the dependencies array
together with props.theme. The problem is that this effect modifies webchatState
so we enter an infinite rerender loop. */
useEffect(() => {
updateTheme(merge(webchatState.theme, props.theme))
}, [props.theme])
return (
<>
)
})