feat: ai course chat (#8426)
* feat: ai course chat * wip: remove old code * wip * feat: responsiveness of ai chat * fix: key warning * feat: make chat resizeable * wip * wip: default questions * wip * fix: fixed position * fix: hide button * Fix scroll issue * Improve questions UI * Refactor UI * Add close icon * Update UI for course chat * Close AI chat question --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/8446/head
Arik Chakma
1 week ago
committed by
GitHub
parent
981af58fa9
commit
dfd54b35b0
9 changed files with 561 additions and 354 deletions
@ -1,74 +0,0 @@ |
||||
import { ArrowRightIcon, BotIcon } from 'lucide-react'; |
||||
import { useState } from 'react'; |
||||
import { |
||||
AICourseFollowUpPopover, |
||||
type AIChatHistoryType, |
||||
} from './AICourseFollowUpPopover'; |
||||
import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; |
||||
|
||||
type AICourseFollowUpProps = { |
||||
courseSlug: string; |
||||
moduleTitle: string; |
||||
lessonTitle: string; |
||||
}; |
||||
|
||||
export function AICourseFollowUp(props: AICourseFollowUpProps) { |
||||
const { courseSlug, moduleTitle, lessonTitle } = props; |
||||
|
||||
const [isOpen, setIsOpen] = useState(false); |
||||
const [showUpgradeModal, setShowUpgradeModal] = useState(false); |
||||
|
||||
const [courseAIChatHistory, setCourseAIChatHistory] = useState< |
||||
AIChatHistoryType[] |
||||
>([ |
||||
{ |
||||
role: 'assistant', |
||||
content: |
||||
'Hey, I am your AI instructor. Here are some examples of what you can ask me about 🤖', |
||||
isDefault: true, |
||||
}, |
||||
]); |
||||
|
||||
return ( |
||||
<div className="relative"> |
||||
<button |
||||
className="mt-4 flex w-full items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-100 p-4 hover:bg-yellow-200 max-lg:mt-3 max-lg:text-sm" |
||||
onClick={() => setIsOpen(true)} |
||||
> |
||||
<BotIcon className="h-4 w-4" /> |
||||
<span>Ask AI some follow up questions</span> |
||||
|
||||
<ArrowRightIcon className="ml-auto h-4 w-4 max-sm:hidden" /> |
||||
</button> |
||||
|
||||
{showUpgradeModal && ( |
||||
<UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} /> |
||||
)} |
||||
|
||||
{isOpen && ( |
||||
<AICourseFollowUpPopover |
||||
courseSlug={courseSlug} |
||||
moduleTitle={moduleTitle} |
||||
lessonTitle={lessonTitle} |
||||
courseAIChatHistory={courseAIChatHistory} |
||||
setCourseAIChatHistory={setCourseAIChatHistory} |
||||
onUpgradeClick={() => { |
||||
setIsOpen(false); |
||||
setShowUpgradeModal(true); |
||||
}} |
||||
onOutsideClick={() => { |
||||
if (!isOpen) { |
||||
return; |
||||
} |
||||
|
||||
setIsOpen(false); |
||||
}} |
||||
/> |
||||
)} |
||||
|
||||
{isOpen && ( |
||||
<div className="pointer-events-none fixed inset-0 z-50 bg-black/50" /> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
import { cn } from '../../lib/classname'; |
||||
|
||||
type AICourseFooterProps = { |
||||
className?: string; |
||||
}; |
||||
export function AICourseFooter(props: AICourseFooterProps) { |
||||
const { className } = props; |
||||
|
||||
return ( |
||||
<div |
||||
className={cn( |
||||
'mx-auto mb-10 mt-5 text-center text-sm text-gray-400', |
||||
className, |
||||
)} |
||||
> |
||||
AI can make mistakes, check important info. |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,42 @@ |
||||
import { GripVertical } from 'lucide-react'; |
||||
import * as ResizablePrimitive from 'react-resizable-panels'; |
||||
import { cn } from '../../lib/classname'; |
||||
|
||||
const ResizablePanelGroup = ({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => ( |
||||
<ResizablePrimitive.PanelGroup |
||||
className={cn( |
||||
'flex h-full w-full data-[panel-group-direction=vertical]:flex-col', |
||||
className, |
||||
)} |
||||
{...props} |
||||
/> |
||||
); |
||||
|
||||
const ResizablePanel = ResizablePrimitive.Panel; |
||||
|
||||
const ResizableHandle = ({ |
||||
withHandle, |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { |
||||
withHandle?: boolean; |
||||
}) => ( |
||||
<ResizablePrimitive.PanelResizeHandle |
||||
className={cn( |
||||
'relative flex w-px items-center justify-center bg-gray-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', |
||||
className, |
||||
)} |
||||
{...props} |
||||
> |
||||
{withHandle && ( |
||||
<div className="z-10 flex h-[30px] w-3 items-center justify-center rounded-sm bg-gray-200 text-black hover:bg-gray-300"> |
||||
<GripVertical className="size-5" /> |
||||
</div> |
||||
)} |
||||
</ResizablePrimitive.PanelResizeHandle> |
||||
); |
||||
|
||||
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }; |
||||
Loading…
Reference in new issue