Function Chat

frontend/src/components/Chat.tsx:42–326

({ isShared = false }: { isShared: boolean })

import { Button } from './ui/button'

export default function Chat({ isShared = false }: { isShared: boolean }) {
	const params = useParams()
	const id = params.id ?? 'new'
	const [isEditing, setIsEditing] = useState(false)
	const imageUploadRef = useRef<HTMLInputElement>(null)
	const contentRef = useRef<HTMLDivElement>(null)
	const [sidebarState, setSidebarState] = useAtom(historySidebarStateAtom)
	const [rawItem, setRawItem] = useAtom(historyAtomFamily({ id }))
	const [historyIds, setHistoryIds] = useAtom(historyIdsAtom)
	const framework = useAtomValue(selectedFrameworkAtom)
	const modelSupportsImages = useAtomValue(modelSupportsImagesAtom)
	const setScreenshot = useSetAtom(screenshotAtom)
	const setDragging = useSetAtom(draggingAtom)
	const item = useMemo(
		() => new ItemWrapper(rawItem, setRawItem),
		[rawItem, setRawItem]
	)

	const { t } = useTranslation()
	const [uiState, setUiState] = useAtom(uiStateAtom)
	const uiTheme = useAtomValue(uiThemeAtom)
	const theme = themes.find(th => th.name === uiTheme)
	const [versionIdx] = useVersion(item)
	const deleteImage = useSetAtom(imageDB.delete)
	const newImage = useAtomValue(imageDB.item(`image-new-0`))
	const [image, setImage] = useAtom(imageDB.item(`image-${id}-${versionIdx}`))
	const lastRender = useAtomValue(
		imageDB.item(`screenshot-${id}-${versionIdx - 1}`)
	)

	// Load shared item
	useEffect(() => {
		if (isShared) {
			;(async () => {
				const sharedItem = await getShare(id)
				setUiState(ui => ({
					...ui,
					pureHTML: sharedItem.html ?? '',
					error: undefined
				}))
				sharedItem.markdown = `---\nname: ${sharedItem.name}\nemoji: ${sharedItem.emoji}\n---\n\n${sharedItem.html}`
				setRawItem(sharedItem)
				if (!historyIds.includes(id)) {
					setHistoryIds([id, ...historyIds])
				}
				// SetItem(sharedItem)
			})().catch((error: unknown) => {
				console.error(error)
				setUiState(ui => ({
					...ui,
					error: (error as Error).toString()
				}))
			})
		}
	}, [isShared, id, setUiState, setRawItem, setHistoryIds, historyIds])

	useEffect(() => {
		setIsEditing(id !== 'new')