👌 IMPROVE: Expert proofreader

examples/expert-proofreader/.env.example

@@ -1 +1 @@
-NEXT_LB_PIPE_API_KEY=""
+LB_PIPE_API_KEY=""

examples/expert-proofreader/README.md

@@ -1,24 +1,26 @@
-
 ![Expert Proofreader Chatbot by ⌘ Langbase][cover]
 
 ![License: MIT][mit] [![Fork to ⌘ Langbase][fork]][pipe]
 
-## Build Expert Proofreader with Pipes — ⌘ Langbase
 
-This chatbot is built by using an AI Pipe on Langbase, it works with 30+ LLMs (OpenAI, Gemini, Mistral, Llama, Gemma, etc), any Data (10M+ context with Memory sets), and any Framework (standard web API you can use with any software).
+## Build Expert Proofreader with a Pipe — ⌘ Langbase
+
+This chatbot is built by using an agentic Pipe on Langbase, it works with 30+ LLMs (OpenAI, Gemini, Mistral, Llama, Gemma, etc), any Data (10M+ context with Memory sets), and any Framework (standard web API you can use with any software).
+
 
 Check out the live demo [here][demo].
 
 ## Features
 
-- 💬 [Expert Proofreader Bot][demo] — Built with an [AI Pipe on ⌘ Langbase][pipe]
+
+- 💬 [Expert Proofreader Chatbot][demo] — Built with an [AI Pipe on ⌘ Langbase][pipe]
 - ⚡️ Streaming — Real-time chat experience with streamed responses
 - 🗣️ Q/A — Ask questions and get pre-defined answers with your preferred AI model and tone
 - 🔋 Responsive and open source — Works on all devices and platforms
 
 ## Learn more
 
-1. Check the [Expert Proofreader Bot on ⌘ Langbase][pipe]
+1. Check the [Expert Proofreader Chatbot on ⌘ Langbase][pipe]
 2. Read the [source code on GitHub][gh] for this example
 3. Go through Documentaion: [Pipe Quick Start][qs]
 4. Learn more about [Pipes & Memory features on ⌘ Langbase][docs]
@@ -29,16 +31,15 @@ Let's get started with the project:
 
 To get started with Langbase, you'll need to [create a free personal account on Langbase.com][signup] and verify your email address. _Done? Cool, cool!_
 
-1. Fork the [Expert Proofreader Bot][pipe] Pipe on ⌘ Langbase.
+1. Fork the [Expert Proofreader Chatbot][pipe] Pipe on ⌘ Langbase.
 2. Go to the API tab to copy the Pipe's API key (to be used on server-side only).
 3. Download the example project folder from [here][download] or clone the reppository.
 4. `cd` into the project directory and open it in your code editor.
 5. Duplicate the `.env.example` file in this project and rename it to `.env.local`.
 6. Add the following environment variables (.env.local):
-
 ```
     # Replace `PIPE_API_KEY` with the copied API key.
-    NEXT_LB_PIPE_API_KEY="PIPE_API_KEY"
+    LB_PIPE_API_KEY="PIPE_API_KEY"
 ```
 7. In your CLI issue the following
 ```
@@ -64,8 +65,7 @@ This project is created by [Langbase][lb] team members, with contributions from:
 
 **_Built by ⌘ [Langbase.com][lb] — Ship hyper-personalized AI assistants with memory!_**
 
-
-[cover]:https://raw.githubusercontent.com/LangbaseInc/docs-images/main/examples/expert-proofreader/expert-proofreader.png
+[cover]:https://raw.githubusercontent.com/LangbaseInc/docs-images/main/examples/expert-proofreader/expert-proofreader-chatbot.png
 [demo]: https://expert-proofreader.langbase.dev
 [lb]: https://langbase.com
 [pipe]: https://langbase.com/examples/expert-proofreader

examples/expert-proofreader/app/api/chat/route.ts

@@ -10,17 +10,17 @@ export const runtime = 'edge'
  */
 export async function POST(req: Request) {
   try {
-    if (!process.env.NEXT_LB_PIPE_API_KEY) {
+    if (!process.env.LB_PIPE_API_KEY) {
       throw new Error(
-        'Please set NEXT_LB_PIPE_API_KEY in your environment variables.'
+        'Please set LB_PIPE_API_KEY in your environment variables.'
       )
     }
 
     const endpointUrl = 'https://api.langbase.com/beta/chat'
 
     const headers = {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${process.env.NEXT_LB_PIPE_API_KEY}`
+      Authorization: `Bearer ${process.env.LB_PIPE_API_KEY}`
     }
 
     // Get chat prompt messages and threadId from the client.

examples/expert-proofreader/components/chatbot-page.tsx

@@ -7,6 +7,7 @@ import { useState } from 'react'
 import { toast } from 'sonner'
 import { ChatInput } from './chat-input'
 import { Opening } from './opening'
+import { Suggestions } from './suggestions'
 
 export interface ChatProps extends React.ComponentProps<'div'> {
   id?: string // Optional: Thread ID if you want to persist the chat in a DB
@@ -31,6 +32,11 @@ 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)}>
@@ -39,7 +45,10 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
             <ChatList messages={messages} />
           </>
         ) : (
-          <Opening />
+          <>
+            <Opening />
+            <Suggestions sendSuggestedPrompt={sendSuggestedPrompt} />
+          </>
         )}
       </div>
       <ChatInput

examples/expert-proofreader/components/opening.tsx

@@ -14,7 +14,7 @@ export function Opening() {
         <div className="mt-2">
           <header className="mb-8">
             <h4 className="text-foreground text-sm sm:text-base mt-4 flex gap-1 tracking-wide">
-              <span>Expert Proofreader Bot by a</span>
+              <span>Expert Proofreader Chatbot by a</span>
               <Link
                 target="_blank"
                 className="underline hover:text-indigo-400 mb-2"
@@ -33,7 +33,7 @@ export function Opening() {
             <div className="flex flex-col gap-4 mt-2 text-sm">
               <Dlink href="https://langbase.com/examples/expert-proofreader">
                 <span>1.</span>
-                <span>Fork this Expert Proofreader Bot Pipe on ⌘ Langbase</span>
+                <span>Fork this Expert Proofreader Chatbot Pipe on ⌘ Langbase</span>
               </Dlink>
               <Dlink href="https://github.com/LangbaseInc/langbase-examples/tree/main/examples/expert-proofreader">
                 <span>2.</span>

examples/expert-proofreader/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'> {
@@ -50,6 +51,17 @@ export function PromptForm({
                 aria-hidden="true"
               />
               <h3>Chat</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 conversation, or simply enter the text you want to be proofread by the Expert Proofreader chatbot.</li>
+                    <li>For more nuanced proofreading, you can choose state-of-the-art LLMs such as Claude 3.5, GPT-4 Turbo, or GPT-4o. With the Langbase agentic pipeline, this can be done easily with just a few clicks.</li>
+                  </ul>
+                </HoverCardContent>
+              </HoverCard>
             </div>
 
             <div className="flex items-center justify-center gap-2 md:justify-start">

examples/expert-proofreader/components/suggestions.tsx

@@ -0,0 +1,58 @@
+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 conversation`,
+    prompt: `Hello`
+  },
+  {
+    title: `Demo text`,
+    prompt: `The computational demands of Large Language Models (LLMs) have escalated dramatically, commensurate with their increasing size and complexity.
+Training state-of-the-art LLMs necessitates vast arrays of high-performance GPUs, often numbering in the thousands, and can consume several megawatt-hours of electricity over periods extending to weeks or even months.
+This resource-intensive process raises pertinent questions about the models' environmental impact and the economic feasibility of their development for all but the most well-funded research institutions or technology companies.
+Moreover, the inference phase, while less demanding than training, still requires substantial computational resources, particularly for real-time applications, thereby limiting the deployment of these models in resource-constrained environments or edge devices.
+Consequently, there is a growing impetus in the field to develop more efficient architectures and training paradigms that can mitigate these computational burdens without compromising the remarkable capabilities that have made LLMs so transformative in natural language processing.`
+
+
+  },
+]
+
+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/expert-proofreader/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 }