👌 IMPROVE: Product review generator improved

examples/product-review-generator/README.md

@@ -37,7 +37,7 @@ To get started with Langbase, you'll need to [create a free personal account on
 ```
     # Replace `PIPE_API_KEY` with the copied API key.
     NEXT_LB_PIPE_API_KEY="PIPE_API_KEY"
-```
+```    
 
 7. Issue the following in your CLI:
 ```sh
@@ -46,7 +46,7 @@ To get started with Langbase, you'll need to [create a free personal account on
 
     # Run the project using the following command:
     npm run dev
-```
+``` 
 
 8. Your app template should now be running on [localhost:3000][local].
 

examples/product-review-generator/components/chatbot-page.tsx

@@ -7,6 +7,9 @@ import { useState } from 'react'
 import { toast } from 'sonner'
 import { ChatInput } from './chat-input'
 import { Opening } from './opening'
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hovercard'
+import { Suggestions } from './suggestions'
+import { Button } from './ui/button'
 
 export interface ChatProps extends React.ComponentProps<'div'> {
   id?: string // Optional: Thread ID if you want to persist the chat in a DB
@@ -31,27 +34,37 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
         setThreadId(lbThreadId)
       }
     })
+
+    const sendSuggestedPrompt = (prompt: string) => {
+      setInput(prompt)
+    }
+
   return (
     <div className="min-h-screen">
-      <div className={cn('pb-36 pt-4 md:pt-10', className)}>
-        {messages.length ? (
-          <>
-            <ChatList messages={messages} />
-          </>
-        ) : (
-          <Opening />
-        )}
+      <div className="min-h-screen">
+        <div className={cn('pb-36 pt-4 md:pt-10', className)}>
+          {messages.length ? (
+            <>
+              <ChatList messages={messages} />
+            </>
+          ) : (
+            <>
+              <Opening />
+              <Suggestions sendSuggestedPrompt={sendSuggestedPrompt} />
+            </>
+          )}
+        </div>
+        <ChatInput
+          id={id}
+          isLoading={isLoading}
+          stop={stop}
+          append={append}
+          reload={reload}
+          messages={messages}
+          input={input}
+          setInput={setInput}
+        />
       </div>
-      <ChatInput
-        id={id}
-        isLoading={isLoading}
-        stop={stop}
-        append={append}
-        reload={reload}
-        messages={messages}
-        input={input}
-        setInput={setInput}
-      />
-    </div>
+    </div>  
   )
 }

examples/product-review-generator/components/prompt-form.tsx

@@ -4,6 +4,7 @@ import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
 import { UseChatHelpers } from 'ai/react'
 import * as React from 'react'
 import Textarea from 'react-textarea-autosize'
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hovercard'
 
 export interface PromptProps
   extends Pick<UseChatHelpers, 'input' | 'setInput'> {
@@ -49,7 +50,19 @@ export function PromptForm({
                 className="text-muted-foreground/50 h-5 w-5"
                 aria-hidden="true"
               />
-              <h3>Chat</h3>
+              <h3>Ask</h3>
+              <HoverCard>
+                <HoverCardTrigger asChild>
+                  <Button variant="link" size="lg" className="text-inherit">@conversation tips</Button>
+                </HoverCardTrigger>
+                <HoverCardContent>
+                  <ul className="list-disc pl-4">
+                    <li>Say hello to start a guided conversation.</li>
+                    <li>Give a detailed review of the product you recently bought including positive and negative aspects.</li>
+                    <li>The Product Review Generator bot will generate a comprehensive review for you and other buyers looking for the same product.</li>
+                  </ul>
+                </HoverCardContent>
+              </HoverCard>
             </div>
 
             <div className="flex items-center justify-center gap-2 md:justify-start">

examples/product-review-generator/components/suggestions.tsx

@@ -0,0 +1,48 @@
+import cn from 'mxcn'
+import { IconSparkles } from './ui/icons'
+
+// Prompt suggestions – Change these to match your use-case/company
+const suggestions = [
+  {
+    title: `Say hello to begin and follow guided conversation`,
+    prompt: `Hello`
+  },
+]
+
+export const Suggestions = ({
+  sendSuggestedPrompt
+}: {
+  sendSuggestedPrompt: (prompt: string) => void
+}) => {
+  const handleClick = (prompt: string) => {
+    sendSuggestedPrompt(prompt)
+  }
+
+  return (
+    <div className="mx-auto mt-12 max-w-4xl">
+      <label className="font-semibold">Suggestions</label>
+      <div className="grid grid-cols-1 gap-4 pt-6 md:grid-cols-2">
+        {suggestions.map((suggestion, index) => {
+          return (
+            <div
+              key={index}
+              className={cn(
+                'border-muted-foreground/20 flex cursor-pointer items-center gap-4 rounded-md border p-4',
+                'hover:bg-background transition-all'
+              )}
+              onClick={() => handleClick(suggestion.prompt)}
+            >
+              <IconSparkles
+                className="text-muted-foreground size-4"
+                aria-hidden="true"
+              />
+              <p className="text-foreground/70 line-clamp-2 font-light leading-6">
+                {suggestion.title}
+              </p>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

examples/product-review-generator/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import cn from 'mxcn'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

examples/product-review-generator/components/ui/hovercard.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import cn from 'mxcn'
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

examples/product-review-generator/package.json

@@ -9,12 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "ai": "3.0.16",
     "class-variance-authority": "^0.7.0",
+    "lucide-react": "^0.438.0",
     "mxcn": "^2.0.0",
     "next": "14.0.4",
     "react": "^18.2.0",