'use client'
import { usePathname, useRouter } from 'next/navigation'
import { PrefetchKind } from 'next/dist/client/components/router-reducer/router-reducer-types'
// import { useChat, type Message } from '@aigxion/isdk/react'
import toast from 'react-hot-toast'
import { cn } from '@/lib/utils'
import { ChatList } from '@/components/chat-list'
import { ChatPanel } from '@/components/chat-panel'
import { ChatScrollAnchor } from '@/components/chat-scroll-anchor'
import { nanoid } from '@/lib/utils'
import { functionSchemas } from '@/lib/functions/schemas'
import { Landing } from '@/components/landing'
import { useGlobalStore } from '@/app/state/global-store'
import { useW3GPTDeploy } from '@/lib/hooks/use-w3gpt-deploy'
// import { useNetwork } from 'wagmi'
import { useEffect, useState } from 'react'
import { FadeIn } from './landing/fade-in'
import Image from 'next/image';
import logoImage from '@/components/images/logo.png';
import { useTranslation } from 'react-i18next'
import { Button, Modal } from 'antd'
import { type Message, useChat } from '@/lib/hooks/use-chat'
import { ChatRequest, FunctionCallHandler } from '@aigxion/isdk'
export interface ChatProps extends React.ComponentProps<'div'> {
initialMessages?: Message[]
id?: string
showLanding?: boolean
avatarUrl?: string | null | undefined
}
export function Chat({
id,
initialMessages,
className,
showLanding = false,
avatarUrl
}: ChatProps) {
const router = useRouter()
const path = usePathname()
const { t, i18n } = useTranslation()
const isChatPage = path.includes('chat')
const {
setIsGenerating,
setIsDeploying,
setDeployContractConfig,
verifyContractConfig,
lastDeploymentData,
setLastDeploymentData
} = useGlobalStore()
// const { chain } = useNetwork()
// const fallbackChainId = chain?.unsupported === false ? chain.id : 5001
// const activeChainId = chain?.id ?? fallbackChainId
// const { deploy } = useW3GPTDeploy({ chainId: activeChainId })
useEffect(() => {
let isLounted = true
async function verifyContract() {
}
verifyContract()
// try {
// let data = localStorage.getItem("UserData");
// if (data == null) return
// data = JSON.parse(data)
// console.log("UserData", data)
// } catch (error) {
// console.log(error)
// }
return () => {
isLounted = false
}
}, [])
useEffect(() => {
let isMounted = true
async function verifyContract() {
if (
!verifyContractConfig?.deployHash ||
lastDeploymentData?.verificationStatus === 'success'
) {
return
}
try {
const response = await fetch('/api/verify-contract', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(verifyContractConfig)
})
const data = await response.json()
if (typeof data === 'string' && data.startsWith('0x') && isMounted) {
toast.success('Contract verified successfully!')
lastDeploymentData &&
setLastDeploymentData({
...lastDeploymentData,
verificationStatus: 'success'
})
} else {
setTimeout(verifyContract, 15000) // Retry after 15 seconds
}
} catch (error) {
console.error('Verification failed', error)
setTimeout(verifyContract, 15000) // Retry after 15 seconds
}
}
verifyContract()
return () => {
isMounted = false
}
}, [lastDeploymentData, verifyContractConfig, setLastDeploymentData])
const functionCallHandler: FunctionCallHandler = async (
chatMessages,
functionCall
) => {
if (functionCall.name === 'deploy_contract') {
setIsDeploying(true)
const { chainId, contractName, sourceCode, constructorArgs } = JSON.parse(
functionCall.arguments || '{}'
)
// setDeployContractConfig({
// chainId: chainId ?? activeChainId,
// contractName,
// sourceCode,
// constructorArgs
// })
// const verifiedContractAddress = await deploy({
// chainId: chainId ?? activeChainId,
// contractName,
// sourceCode,
// constructorArgs
// })
// const functionResponse: ChatRequest = {
// messages: [
// ...chatMessages,
// {
// id: nanoid(),
// name: 'deploy_contract',
// role: 'function',
// content: JSON.stringify({ verifiedContractAddress })
// }
// ],
// functions: functionSchemas
// }
// return functionResponse
} else if (functionCall.name === 'text_to_image') {
const response = await fetch('/api/text-to-image', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text: functionCall.arguments })
})
if (!response.ok) {
throw new Error(response.statusText)
}
const { imageUrl, metadataUrl } = await response.json()
const functionResponse: ChatRequest = {
messages: [
...chatMessages,
{
id: nanoid(),
name: 'text-to-image',
role: 'function',
content: JSON.stringify({ imageUrl, metadataUrl })
}
],
functions: functionSchemas
}
return functionResponse
}
}
const { messages, append, reload, stop, isLoading, input, setInput } =
useChat({
experimental_onFunctionCall: functionCallHandler,
initialMessages,
id,
body: {
id
},
onResponse(response) {
setIsGenerating(true)
if (!isChatPage) {
// router.prefetch(`${i18n.language}/chat/${id}`, {
// kind: PrefetchKind.FULL
// })
}
if (response.status === 401) {
toast.error(response.statusText)
}
},
onFinish() {
setIsGenerating(false)
if (!isChatPage) {
// history.pushState({}, '', `${i18n.language}/chat/${id}`)
// history.go(1)
}
}
})
return (
<>
{/* {showLanding && } */}
{/* {showLanding && What do you want to ask about AI or Blockchain?
} */}
{
showLanding &&
// { }} />
}
{!!messages && }
)
}
export const LogoAI: React.FC<{ className?: string, width?: string }> = ({ className, width }) => {
return (
)
};