133 lines
4.9 KiB
Python
133 lines
4.9 KiB
Python
'use client'
|
|
|
|
import { useForm } from 'react-hook-form'
|
|
import { ArrowUp, CheckCircle, Package2 } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
|
|
import { Textarea } from '~/components/ui/textarea'
|
|
import CodeGenService from '~/app/api/services/code-gen-service'
|
|
import { useParams } from 'next/navigation'
|
|
|
|
type FormData = {
|
|
message: string
|
|
}
|
|
|
|
interface CodeProps {
|
|
setCode: (newCode: string) => void
|
|
}
|
|
|
|
const Rightpanel: React.FC<CodeProps> = ({ setCode }) => {
|
|
const { register, handleSubmit, reset, watch } = useForm<FormData>()
|
|
|
|
const [textInput, setTextInput] = useState<string[]>([])
|
|
const [successMessage, setSuccessMessage] = useState<string | null>(null)
|
|
const { projectId } = useParams() as { projectId: string }
|
|
|
|
const messageValue = watch('message', '') // watch the input value
|
|
|
|
const handleTextSubmit = async (data: FormData) => {
|
|
setTextInput((prevMessages) => [...prevMessages, data.message])
|
|
try {
|
|
const codeGenService = new CodeGenService()
|
|
const response = await codeGenService.generateCode({
|
|
project_id: projectId,
|
|
endpoint_description: data.message,
|
|
})
|
|
setSuccessMessage('Code generated successfully!')
|
|
setTimeout(() => setSuccessMessage(null), 3000) // Hide after 3 seconds
|
|
reset()
|
|
const { content_base64 } = response
|
|
setCode(atob(content_base64))
|
|
console.log(response)
|
|
} catch (error) {
|
|
console.error('Error generating code:', error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="size-full max-w-[400px] flex-1 shrink-0 border border-l border-neutral-100">
|
|
<Tabs
|
|
defaultValue="code-chat"
|
|
className="flex h-full flex-col items-start justify-start"
|
|
>
|
|
<TabsList className="w-full justify-start border-b border-neutral-100 bg-transparent">
|
|
<TabsTrigger value="code-chat" className="">
|
|
Code chat
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent
|
|
value="code-chat"
|
|
className="flex w-full flex-1 flex-col px-2 py-2"
|
|
>
|
|
<div className="flex h-full max-h-[600px] flex-1 flex-col justify-center gap-[3rem] overflow-y-auto">
|
|
{!textInput.length ? (
|
|
<div className="flex flex-col items-center gap-2 py-[14px] font-[inter]">
|
|
<Package2 className="mb-2 h-[40px] w-[40px] text-[#7A69EE]" />
|
|
<h5 className="text-[14px] font-medium text-[#212121]">
|
|
No tasks running yet
|
|
</h5>
|
|
<small className="text-center text-[12px] font-normal text-[#6B6B6B]">
|
|
As you generate endpoints the progress will be displayed here
|
|
</small>
|
|
</div>
|
|
) : (
|
|
<div className="w-full">
|
|
{textInput.map((msg, index) => (
|
|
<div key={index} className="mb-4">
|
|
<div className="w-[90%] rounded-md bg-[#F8F8F8] p-2">
|
|
<p className="px-2 text-[14px]">
|
|
{msg} something is the messag e
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-2 p-2">
|
|
<p>Code Generated succesfully</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* Success Message */}
|
|
{successMessage && (
|
|
<div className="bg-green-100 text-green-700 absolute bottom-[140px] left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-md p-2 shadow-md">
|
|
<CheckCircle className="h-5 w-5" />
|
|
<span>{successMessage}</span>
|
|
</div>
|
|
)}
|
|
|
|
<form
|
|
onSubmit={handleSubmit(handleTextSubmit)}
|
|
className="shadow-aiChat mt-4 gap-8 border-[1px] border-[#EDEDED] p-3"
|
|
>
|
|
<Textarea
|
|
{...register('message')}
|
|
rows={4}
|
|
className="resize-none border-none p-0 outline-none focus:outline-none focus-visible:ring-0"
|
|
placeholder="Describe the next API you want to build."
|
|
/>
|
|
|
|
<div className="flex items-center justify-end">
|
|
<button
|
|
type="submit"
|
|
className={`rounded-md px-[14px] py-2 ${
|
|
!messageValue.trim()
|
|
? 'cursor-not-allowed bg-[#C2C2C6]'
|
|
: 'cursor-pointer bg-black'
|
|
}`}
|
|
title="Submit"
|
|
disabled={!messageValue.trim()}
|
|
>
|
|
<ArrowUp className="h-[30px] w-[36px]" color="#F5F5F7" />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Rightpanel
|