add suggestion buttons

Author: mfortman11

app/globals.css

@@ -5,11 +5,13 @@
 :root {
   --text-primary: #FFFFFF;
   --text-primary-inverse: #090909;
+  --text-primary-main: #7724AA;
   --text-secondary: #A6AAAE;
   --text-secondary-inverse: #494A4D;
   --background-bubble-primary: #611C9B;
   --background-bubble-secondary: #F7F7F7;
   --border-primary: #CED0D2;
+  --background-soft: #F3E5F5;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
   --text-tertiary: #6B6F73;
@@ -21,10 +23,12 @@
 .dark {
   --text-primary: #090909;
   --text-primary-inverse: #FFFFFF;
+  --text-primary-main: #9946B9;
   --text-secondary: #494A4D;
   --text-secondary-inverse: #A6AAAE;
   --background-bubble-primary: #BA68C8;
   --background-bubble-secondary: #232324;
+  --background-soft: #200033;
   --border-primary: #262626;
   --background-start-rgb: 23, 23, 23;
   --background-end-rgb: 28, 28, 28;
@@ -193,6 +197,11 @@ body {
   }
 }
 
+.prompt-button {
+  background-color: var(--background-soft);
+  color: var(--text-primary-main);
+}
+
 /* Toggle Styles */
 .toggle-background {
   background-color: var(--background-bubble-primary);

app/page.tsx

@@ -1,14 +1,16 @@
 "use client";
 import {useEffect, useRef, useState} from 'react';
 import Bubble from '../components/Bubble'
-import { useChat } from 'ai/react';
+import { useChat, Message } from 'ai/react';
 import Footer from '../components/Footer';
 import Configure from '../components/Configure';
+import PromptSuggestionRow from '../components/PromptSuggestions/PromptSuggestionsRow';
 import ThemeButton from '../components/ThemeButton';
 import useConfiguration from './hooks/useConfiguration';
 
+
 export default function Home() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat();
+  const { append, messages, input, handleInputChange, handleSubmit } = useChat();
   const { useRag, llm, similarityMetric, setConfiguration } = useConfiguration();
 
   const messagesEndRef = useRef(null);
@@ -26,6 +28,11 @@ export default function Home() {
     handleSubmit(e, { options: { body: { useRag, llm, similarityMetric}}});
   }
 
+  const handlePrompt = (promptText) => {
+    const msg: Message = { id: crypto.randomUUID(),  content: promptText, role: 'user' };
+    append(msg, { options: { body: { useRag, llm, similarityMetric}}});
+  };
+
   return (
     <>
     <main className="flex h-screen flex-col items-center justify-center">
@@ -54,6 +61,9 @@ export default function Home() {
             {messages.map((message, index) => <Bubble ref={messagesEndRef} key={`message-${index}`} content={message} />)}
           </div>
         </div>
+        {!messages || messages.length === 0 && (
+          <PromptSuggestionRow onPromptClick={handlePrompt} />
+        )}
         <form className='flex h-[40px] gap-2' onSubmit={handleSend}>
           <input onChange={handleInputChange} value={input} className='chatbot-input flex-1 text-sm md:text-base outline-none bg-transparent rounded-md p-2' placeholder='Send a message...' />
           <button type="submit" className='chatbot-send-button flex rounded-md items-center justify-center px-2.5 origin:px-3'>

components/PromptSuggestions/PromptSuggestionButton.tsx

@@ -0,0 +1,13 @@
+
+const PromptSuggestionButton = ({ text, onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className="prompt-button text-sm py-2 px-4 rounded-lg overflow-hidden whitespace-nowrap focus:outline-none focus:shadow-outline"
+    >
+      {text}
+    </button>
+  );
+};
+
+export default PromptSuggestionButton;

components/PromptSuggestions/PromptSuggestionsRow.tsx

@@ -0,0 +1,20 @@
+import PromptSuggestionButton from "./PromptSuggestionButton";
+
+const PromptSuggestionRow = ({ onPromptClick }) => {
+  const prompts = [
+    'How does similarity search work with a Vector DB?',
+    'What is DataStax Enterprise?',
+    'How does CassIO work?',
+    'What are some common FAQs about Astra?',
+  ];
+
+  return (
+    <div className="flex flex-row flex-wrap justify-start items-center py-4 gap-2">
+      {prompts.map((prompt, index) => (
+        <PromptSuggestionButton key={`suggestion-${index}`} text={prompt} onClick={() => onPromptClick(prompt)} />
+      ))}
+    </div>
+  );
+};
+
+export default PromptSuggestionRow;