👌 IMPROVE: Career prep coach updated with memory ui

examples/career-prep-coach/.env.example

@@ -1 +1,2 @@
-NEXT_LB_PIPE_API_KEY=""
+LANGBASE_PIPE_API_KEY=""
+

examples/career-prep-coach/README.md

@@ -36,7 +36,7 @@ To get started with Langbase, you'll need to [create a free personal account on
 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"
+    LANGBASE_PIPE_API_KEY="PIPE_API_KEY"
 ```    
 
 7. Issue the following in your CLI:
@@ -65,7 +65,7 @@ This project is created by [Langbase][lb] team members, with contributions from:
 
 [demo]: https://career-prep-coach.langbase.dev
 [lb]: https://langbase.com
-[pipe]: https://beta.langbase.com/examples/career-prep-coach
+[pipe]: https://langbase.com/examples/career-prep-coach
 [gh]: https://github.com/LangbaseInc/langbase-examples/tree/main/examples/career-prep-coach
 [cover]:https://raw.githubusercontent.com/LangbaseInc/docs-images/main/examples/career-prep-coach/career-prep-coach.png
 [download]:https://download-directory.github.io/?url=https://github.com/LangbaseInc/langbase-examples/tree/main/examples/career-prep-coach

examples/career-prep-coach/app/api/chat/route.ts

@@ -26,9 +26,9 @@ export async function POST(req: Request) {
     }
 
 
-    if (!process.env.NEXT_LB_PIPE_API_KEY) {
+    if (!process.env.LANGBASE_PIPE_API_KEY) {
       throw new Error(
-        'Please set NEXT_LB_PIPE_API_KEY in your environment variables.'
+        'Please set LANGBASE_PIPE_API_KEY in your environment variables.'
       )
     }
 
@@ -39,14 +39,14 @@ export async function POST(req: Request) {
     } else if (action === 'getMemorySets') {
       return handleGetMemorySets(userApiKey)
     } else if (action === 'updatePipe') {
-      const { memoryName } = await req.json()
+      const { memoryName } = body;
       return updatePipe(ownerLogin, memoryName, userApiKey)
     } else {
       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.LANGBASE_PIPE_API_KEY}`
       }
 
       // Get chat prompt messages and threadId from the client.
@@ -153,11 +153,18 @@ async function handleFileUpload(req: Request, userApiKey: string, ownerLogin: st
 }
 
 async function updatePipe(ownerLogin: string | undefined, memoryName: string, userApiKey: string) {
-  const url = `https://api.langbase.com/beta/pipes/${ownerLogin}/shoes-expert`;
+
+  if (!ownerLogin || !memoryName || !userApiKey) {
+    return new Response(JSON.stringify({ error: 'Missing required parameters' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' }
+    });
+  }
+  const url = `https://api.langbase.com/beta/pipes/${ownerLogin}/career-prep-coach`;
 
   const pipe = {
-    name: "shoes-expert",
-    description: "An AI-powered shoe expert that recommends Nike and Adidas footwear based on customer preferences and provides personalized shopping assistance.",
+    name: "career-prep-coach",
+    description: "Your AI-powered personal interview coach, expertly preparing you for success using proven techniques and tailored feedback.",
     status: "private",
     config: {
       memorysets: [memoryName]

examples/career-prep-coach/components/chatbot-page.tsx

@@ -7,6 +7,7 @@ import { useState, useCallback } 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
@@ -38,10 +39,24 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
     })
 
     const fetchMemorySets = useCallback(async () => {
+
+      if (!userApiKey || !ownerLogin) {
+        toast.error('Please set both API Key and Owner Login first');
+        return;
+      }
       try {
         const response = await fetch('/api/chat?action=getMemorySets', {
           method: 'POST',
-          body: JSON.stringify({ userApiKey, ownerLogin })
+          body: JSON.stringify({ userApiKey, ownerLogin,
+            pipe: {
+              name: "career-prep-coach",
+              description: "Your AI-powered personal interview coach",
+              status: "private",
+              config: {
+                memorysets: []  // This will be populated when memory is selected
+              },
+            }
+           })
         })
         if (!response.ok) throw new Error('Failed to fetch memory sets')
         const data = await response.json()
@@ -59,6 +74,11 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
     const handleMemorySelect = useCallback((memoryUrl: string) => {
       setSelectedMemory(memoryUrl)
     }, [])
+
+    const sendSuggestedPrompt = (prompt: string) => {
+      setInput(prompt)
+    }
+
 
     return (
       <div className="min-h-screen">
@@ -68,7 +88,10 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) {
               <ChatList messages={messages} />
             </>
           ) : (
+            <>
             <Opening />
+            <Suggestions sendSuggestedPrompt={sendSuggestedPrompt} />
+          </>
           )}
           <ChatInput
             id={id}

examples/career-prep-coach/components/header.tsx

@@ -32,7 +32,7 @@ export async function Header() {
         </a>
         <a
           target="_blank"
-          href="https://beta.langbase.com/examples/career-prep-coach"
+          href="https://langbase.com/examples/career-prep-coach"
           rel="noopener noreferrer"
           className={cn(buttonVariants({ variant: 'default' }))}
         >

examples/career-prep-coach/components/opening.tsx

@@ -18,7 +18,7 @@ export function Opening() {
               <Link
                 target="_blank"
                 className="underline hover:text-indigo-400 mb-2"
-                href="https://beta.langbase.com/examples/career-prep-coach"
+                href="https://langbase.com/examples/career-prep-coach"
               >
                 <span className="font-bold">pipe on ⌘ Langbase</span>
               </Link>
@@ -31,7 +31,7 @@ export function Opening() {
           <div className="mt-4 flex flex-col gap-4 text-sm [&>p]:my-0 [&>p]:py-0">
             <p>Learn more by checking out:</p>
             <div className="flex flex-col gap-4 mt-2 text-sm">
-              <Dlink href="https://beta.langbase.com/examples/career-prep-coach">
+              <Dlink href="https://langbase.com/examples/career-prep-coach">
                 <span>1.</span>
                 <span>Fork this Career Prep Coach Chatbot Pipe on ⌘ Langbase</span>
               </Dlink>

examples/career-prep-coach/components/prompt-form.tsx

@@ -6,6 +6,7 @@ import * as React from 'react'
 import Textarea from 'react-textarea-autosize'
 import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover'
 import { MemorySidebar } from './memory-sidebar'
+import { HoverCard, HoverCardTrigger, HoverCardContent } from 'components/ui/hovercard'
 
 export interface PromptProps
   extends Pick<UseChatHelpers, 'input' | 'setInput'> {
@@ -71,6 +72,25 @@ 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>
+                      You can use Langbase memory with this chatbot to upload your resume, and for that you need a&nbsp;
+                       <a href="https://langbase.com/docs/api-reference/api-keys#step-1-go-to-profile-settings" target="_blank" rel="noopener noreferrer" className="underline">
+                        user API key and your login name.
+                      </a>.
+                    </li>
+                    <li>
+                      Once the user API key and owner login are entered, please make sure to save and then refresh to select the memory directly from the Langbase memory. This action will attach the memory to the current pipe.
+                    </li>
+                  </ul>
+                </HoverCardContent>
+              </HoverCard>
+
             </div>
 
             <div className="flex items-center justify-center gap-2 md:justify-start">

examples/career-prep-coach/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: `How to use this chatbot?`,
+    prompt: `How can I use your services?`
+  },
+]
+
+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/career-prep-coach/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/career-prep-coach/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",