3477361db0
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Added `useAiIframeNavigation` hook to manage iframe navigation and enforce base paths. - Introduced `useAiIframeExternalLinks` hook to handle external link opening in the parent tab. - Updated `AiChatIframe` component to utilize the new hooks for improved user experience.
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useRef } from "react"
|
|
import type { AiChatContext } from "@/lib/ai/chat-context"
|
|
import { buildEmbedSearchParams } from "@/lib/ai/chat-context"
|
|
import { buildAiEmbedUrl, resolveAiEmbedOrigin } from "@/lib/ai/embed-url"
|
|
import {
|
|
useAiIframeExternalLinks,
|
|
useAiIframeNavigation,
|
|
} from "@/lib/ai/use-ai-iframe-navigation"
|
|
import { useTheme } from "next-themes"
|
|
|
|
type AiChatIframeProps = {
|
|
publicPath?: string
|
|
context: AiChatContext
|
|
className?: string
|
|
}
|
|
|
|
export function AiChatIframe({ publicPath = "/ai", context, className }: AiChatIframeProps) {
|
|
const iframeRef = useRef<HTMLIFrameElement>(null)
|
|
const { resolvedTheme } = useTheme()
|
|
const embedOrigin = useMemo(() => resolveAiEmbedOrigin(publicPath), [publicPath])
|
|
const src = useMemo(() => {
|
|
const qs = buildEmbedSearchParams(context)
|
|
return buildAiEmbedUrl(publicPath, qs)
|
|
}, [publicPath, context])
|
|
|
|
useAiIframeNavigation(iframeRef, publicPath)
|
|
useAiIframeExternalLinks(embedOrigin)
|
|
|
|
useEffect(() => {
|
|
const iframe = iframeRef.current
|
|
if (!iframe?.contentWindow || !embedOrigin) return
|
|
iframe.contentWindow.postMessage(
|
|
{ type: "ULTI_THEME", theme: resolvedTheme === "dark" ? "dark" : "light" },
|
|
embedOrigin
|
|
)
|
|
}, [resolvedTheme, embedOrigin])
|
|
|
|
useEffect(() => {
|
|
const iframe = iframeRef.current
|
|
if (!iframe?.contentWindow || !embedOrigin) return
|
|
iframe.contentWindow.postMessage(
|
|
{
|
|
type: "ULTI_CONTEXT_UPDATE",
|
|
context,
|
|
systemPrompt: context.systemPromptExtra,
|
|
},
|
|
embedOrigin
|
|
)
|
|
}, [context, embedOrigin])
|
|
|
|
return (
|
|
<iframe
|
|
ref={iframeRef}
|
|
title="UltiAI"
|
|
src={src}
|
|
className={className}
|
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
|
|
allow="clipboard-read; clipboard-write"
|
|
/>
|
|
)
|
|
}
|