First.

.devcontainer/devcontainer.json

@@ -0,0 +1,15 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:1.0.7-18-bullseye",
+  "features": {
+    "git-lfs": "latest"
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"],
+      "settings": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      }
+    }
+  }
+}

.env.example

@@ -0,0 +1,5 @@
+# The ChatBotKit Secret Token
+CHATBOTKIT_API_SECRET=
+
+# The Brave API Token
+BRAVE_SUBSCRIPTION_TOKEN=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc.json

@@ -0,0 +1,30 @@
+{
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "importOrder": [
+    ".css$",
+    "^core-js-pure",
+    "^jest",
+    "^@/styles",
+    "^dotenv",
+    "^react",
+    "^react-*",
+    "^next/*",
+    "^@/",
+    "^:/",
+    "^#/",
+    "^[./]",
+    "^@",
+    "^."
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "github.copilot"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": false,
+  "editor.tabSize": 2,
+  "editor.rulers": [80],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "terminal.integrated.scrollback": 100000,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "githubPullRequests.remotes": ["origin"],
+  "files.autoSave": "off",
+  "files.associations": {
+    "*.xml": "html",
+    "*.svg": "html"
+  }
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ChatBotKit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,46 @@
+# 
 
+
+
+## Technology Stack
+
+- **ChatBotKit SDK**: For building the chatbot logic and handling conversation flow.
+- **React**: For UI components that interact with the user, such as forms for capturing appointment details and slot selection.
+- **Next.js**: The application environment.
+
+## Setup
+
+1. Ensure you have Node.js installed.
+2. Clone this repository.
+3. Install dependencies by running npm install.
+4. Set the `CHATBOTKIT_API_SECRET` environment variable with your ChatBotKit API secret.
+5. Optionally, set the `CHATBOTKIT_MODEL` environment variable to specify the model used for conversation (default is GPT-3.5 Turbo).
+
+## Usage
+
+Run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Learn More
+
+To learn more about ChatBotKit and relevent SDKs look at the following resources:
+
+- [ChatBotKit Documentation](https://chatbotkit.com/docs) - learn about ChatBotKit
+- [ChatBotKit JavaScript SDKs](https://github.com/chatbotkit/node-sdk) - learn about used SDKs
+
+## Deployment
+
+The easiest way to deploy this Next.js app is to use the [Vercel Platform](https://vercel.com).
+
+## Contributing
+
+Contributions to enhance the chatbot's functionality or address issues are welcome. Please follow the standard pull request process for contributions.
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.

actions/conversation.jsx

@@ -0,0 +1,92 @@
+'use server'
+
+import SearchResults from '@/components/functions/SearchResults'
+
+import { streamComplete } from '@chatbotkit/react/actions/complete'
+import { ChatBotKit } from '@chatbotkit/sdk'
+
+const cbk = new ChatBotKit({
+  secret: process.env.CHATBOTKIT_API_SECRET,
+})
+
+export async function complete({ messages }) {
+  return streamComplete({
+    client: cbk.conversation,
+
+    // The backstory is the heart of the conversation. It provides the context
+    // and rules for the conversational AI agent to follow. In this example, the
+    // backstory is a simple appointment booking system for a virtual assistant.
+
+    backstory: `You are a search engine virtual assistant. You can help users find information on the web. You can also help users with their everyday tasks.
+  
+ABILITIES:
+- You can search for information on the web.
+- You can help users with their everyday tasks.
+- You can provide information on a wide range of topics.
+
+RULES:
+- Be polite and professional.
+- Provide accurate information.
+`,
+
+    // We allow configuration of the model to be used for the conversation by
+    // setting the CHATBOTKIT_MODEL environment variable. The default model is
+    // GPT-3.5 Turbo.
+
+    model: process.env.CHATBOTKIT_MODEL || 'gpt-3.5-turbo',
+
+    // Pass the messages to the conversation.
+
+    messages,
+
+    // Pass a list of functions that the AI agent can call to interact with.
+
+    functions: [
+      {
+        name: 'search',
+        description: 'Search the web for information.',
+        parameters: {
+          type: 'object',
+          properties: {
+            query: {
+              type: 'string',
+            },
+          },
+          required: ['query'],
+        },
+        handler: async ({ query }) => {
+          const results = await fetch(
+            `https://api.search.brave.com/res/v1/web/search?q=${encodeURIComponent(query)}`,
+            {
+              headers: {
+                Accept: 'application/json',
+                'X-Subscription-Token': process.env.BRAVE_SUBSCRIPTION_TOKEN,
+              },
+            }
+          )
+
+          if (!results.ok) {
+            return {
+              result: {
+                status: 'error',
+                message: 'An error occurred while searching the web.',
+              },
+            }
+          }
+
+          const data = await results.json()
+
+          return {
+            result: {
+              status: 'success',
+              data: data.web.results.map(({ description }) => ({
+                description,
+              })),
+            },
+            children: <SearchResults data={data} />,
+          }
+        },
+      },
+    ],
+  })
+}

app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/layout.js

@@ -0,0 +1,11 @@
+import './globals.css'
+
+import { GeistSans } from 'geist/font/sans'
+
+export default function Layout({ children }) {
+  return (
+    <html lang="en" className={GeistSans.className}>
+      <body>{children}</body>
+    </html>
+  )
+}

app/page.js

@@ -0,0 +1,13 @@
+import { complete } from '@/actions/conversation'
+import ChatArea from '@/components/ChatArea'
+import '@/components/functions'
+
+import ConversationManager from '@chatbotkit/react/components/ConversationManager'
+
+export default function Page() {
+  return (
+    <ConversationManager endpoint={complete}>
+        <ChatArea />
+    </ConversationManager>
+  )
+}

components/ChatArea.jsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { ChatInput, ChatMessage, ConversationContext } from '@chatbotkit/react'
+
+import clsx from 'clsx'
+
+export function UserMessage({ text, children, ...props }) {
+  return (
+    <div {...props} className="flex space-x-2 items-end justify-end">
+      {children}
+      {text ? (
+        <ChatMessage
+          className="bg-white text-gray-900 border border-gray-900 rounded-lg shadow-md p-4 prose"
+          text={text}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+export function BotMessage({ text, children, ...props }) {
+  return (
+    <div {...props} className="flex space-x-2 items-end">
+      {children}
+      {text ? (
+        <ChatMessage
+          className="bg-white text-gray-900 border border-gray-900 rounded-lg shadow-md p-4 prose"
+          text={text}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+export default function ChatArea() {
+  const {
+    thinking,
+
+    text,
+    setText,
+
+    message,
+    messages,
+
+    submit,
+  } = useContext(ConversationContext)
+
+  return (
+    <div className="my-10 mx-auto w-full max-w-2xl flex flex-col gap-4">
+      {messages.length ? (
+        <div className="flex flex-col gap-4">
+          {messages
+            .filter(({ type }) => ['user', 'bot'].includes(type))
+            .map(({ id, type, text, children }, index, messages) => {
+              switch (type) {
+                case 'user':
+                  return <UserMessage key={id} text={text} />
+
+                case 'bot':
+                  return (
+                    <BotMessage key={id} text={text}>
+                      {children ? (
+                        <div className="transition-all duration-300 ease-in-out w-full">
+                          {children}
+                        </div>
+                      ) : null}
+                    </BotMessage>
+                  )
+              }
+            })}
+          {message ? <BotMessage key={message.id} text={message.text} /> : null}
+          {thinking ? <BotMessage key="thinking" text="● ● ●" /> : null}
+        </div>
+      ) : null}
+      <ChatInput
+        className="p-5 text-lg bg-white border-2 border-gray-900 rounded-xl focus:outline-none resize-none"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onSubmit={submit}
+        placeholder="What do you want to know?"
+      />
+    </div>
+  )
+}