From 05d0f16b6ab894453dd04b4aaf5b7ef24d69e504 Mon Sep 17 00:00:00 2001 From: Shivansh Date: Sat, 9 Nov 2024 22:23:19 +0530 Subject: [PATCH] added curated chatbot --- alimento-nextjs/app/(PublicRoutes)/page.tsx | 198 +++++++++++++----- .../components/chatbot/chatbot.tsx | 128 +++++++++++ alimento-nextjs/components/chatbot/index.js | 18 ++ alimento-nextjs/components/chatbot/steps.ts | 40 ++++ alimento-nextjs/components/chatbot/styles.js | 7 + alimento-nextjs/next.config.ts | 1 + alimento-nextjs/package.json | 1 + .../types/react-simple-chatbot.d.ts | 35 ++++ 8 files changed, 374 insertions(+), 54 deletions(-) create mode 100644 alimento-nextjs/components/chatbot/chatbot.tsx create mode 100644 alimento-nextjs/components/chatbot/index.js create mode 100644 alimento-nextjs/components/chatbot/steps.ts create mode 100644 alimento-nextjs/components/chatbot/styles.js create mode 100644 alimento-nextjs/types/react-simple-chatbot.d.ts diff --git a/alimento-nextjs/app/(PublicRoutes)/page.tsx b/alimento-nextjs/app/(PublicRoutes)/page.tsx index 9ca7a53..a05c2e7 100644 --- a/alimento-nextjs/app/(PublicRoutes)/page.tsx +++ b/alimento-nextjs/app/(PublicRoutes)/page.tsx @@ -1,17 +1,39 @@ -"use client" +"use client"; -import { cn } from '@/lib/utils'; -import {Button} from '@/components/ui/button' -import {Card} from "@/components/ui/card" -import {Input} from "@/components/ui/input" -import Image from 'next/image'; -import Link from 'next/link'; -import { ShoppingCart, Truck, Award, ChevronLeft, ChevronRight } from 'lucide-react'; +import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import Image from "next/image"; +import Link from "next/link"; +import { + ShoppingCart, + Truck, + Award, + ChevronLeft, + ChevronRight, + ChefHat, +} from "lucide-react"; +import Chatbot from "@/components/chatbot/chatbot"; +import { useState } from "react"; const services = [ - { icon: ShoppingCart, title: 'Easy to order', text: 'Our user-friendly UI makes it easier for you to order seamlessly.' }, - { icon: Truck, title: 'Safe Delivery', text: 'Assured no damage to food with our safe delivery service.' }, - { icon: Award, title: 'Best Quality', text: 'Collections of best-rated restaurants maintain our quality standards.' } + { + icon: ShoppingCart, + title: "Easy to order", + text: "Our user-friendly UI makes it easier for you to order seamlessly.", + }, + { + icon: Truck, + title: "Safe Delivery", + text: "Assured no damage to food with our safe delivery service.", + }, + { + icon: Award, + title: "Best Quality", + text: + "Collections of best-rated restaurants maintain our quality standards.", + }, ]; function ServiceSection() { @@ -20,7 +42,8 @@ function ServiceSection() { {services.map((service, index) => (
- {/* Adjust size and color as needed */} + {" "} + {/* Adjust size and color as needed */}

{service.title} @@ -35,23 +58,38 @@ function ServiceSection() { } export default function Home() { + const [chatbotOpen, toggleChatbotOpen] = useState(false); + return ( <> {/* Hero Section */} -
+
{/* Left Section */} -
+

Discover the best food at your place

- Craving something delicious? Explore the best food around you, from local favorites to hidden gems all just a tap away! + Craving something delicious? Explore the best food around you, + from local favorites to hidden gems all just a tap away!

{/* Search Form and Buttons */}
-
+ Delivery

Or

Dine in @@ -96,66 +138,114 @@ export default function Home() { width={288} height={288} /> -
- +
{/* Services Section */} - + {/* Reviews Section */} -
+
-

Our lovely customer loves our food!

+

+ Our lovely customer loves our food! +

- “Donec euismod a mauris ornare posuere. Donec porttitor ex vitae ipsum tincidunt auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas” + “Donec euismod a mauris ornare posuere. Donec porttitor ex vitae + ipsum tincidunt auctor. Pellentesque habitant morbi tristique + senectus et netus et malesuada fames ac turpis egestas”

- {Array(4).fill(null).map((_, i) => ( - - ))} + {Array(4) + .fill(null) + .map((_, i) => ( + + ))}
-

Martin Robbin

+

+ Martin Robbin +

Delhi, India

- - -
+ + +
- review-image + review-image
{/* Membership Section */}
- -
-

- Join our membership and get discount up to 50% -

- - - - -
- + +
+

+ Join our membership and get discount up to 50% +

+
+ + +
+
+
+ {/* Chatbot - Positioned at the Bottom Right */} +
+ + {chatbotOpen && } +
); } diff --git a/alimento-nextjs/components/chatbot/chatbot.tsx b/alimento-nextjs/components/chatbot/chatbot.tsx new file mode 100644 index 0000000..29a2708 --- /dev/null +++ b/alimento-nextjs/components/chatbot/chatbot.tsx @@ -0,0 +1,128 @@ +import { useState } from "react"; +import ChatBot from "react-simple-chatbot"; + +const Chatbot = () => { + const [userMessage, setUserMessage] = useState(""); + + const handleMessage = (msg) => { + setUserMessage(msg); // Update user message on each interaction + }; + + const flow = [ + { + id: "1", + message: "Welcome to **Alimento**, your local food connection! What is your name?", + trigger: "2", // Proceed to step 2 after the question + }, + { + id: "2", + user: true, // Wait for user input (name) + trigger: "3", // Proceed to step 3 once the user responds + }, + { + id: "3", + message: "Hi {previousValue}, nice to meet you! How can I assist you today?", + trigger: "4", // Proceed to step 4 after greeting + }, + { + id: "4", + message: "Please choose an option below to proceed:", + trigger: "5", // Provide options to the user + }, + { + id: "5", + options: [ + { value: "Request a dish from a local vendor", label: "Request a dish", trigger: "6" }, + { value: "Find a recipe to make your favorite dish", label: "Find a recipe", trigger: "8" }, + { value: "Explore vendor details", label: "Explore vendors", trigger: "16" }, + ], + }, + // ------------------- Request a dish flow ------------------- + { + id: "6", + message: "Great! What type of dish would you like to request from a local vendor?", + trigger: "7", // Go to step 7 to choose the dish + }, + { + id: "7", + options: [ + { value: "Indian", label: "Indian", trigger: "9" }, + { value: "Chinese", label: "Chinese", trigger: "9" }, + { value: "Italian", label: "Italian", trigger: "9" }, + { value: "Vegetarian", label: "Vegetarian", trigger: "9" }, + { value: "Non-Vegetarian", label: "Non-Vegetarian", trigger: "9" }, + ], + }, + { + id: "9", + message: "Awesome! We will connect you to a vendor specializing in {previousValue} dishes. Please wait a moment.", + trigger: "10", + }, + { + id: "10", + message: "Your request has been forwarded! A vendor will contact you shortly. Is there anything else I can help you with?", + trigger: "5", // Give another set of options or end the chat + }, + // ------------------- Find a recipe flow ------------------- + { + id: "8", + message: "Here are some recipes to try out! Which one would you like to explore?", + trigger: "11", // Proceed to recipe options + }, + { + id: "11", + options: [ + { value: "Indian", label: "Indian", trigger: "12" }, + { value: "Chinese", label: "Chinese", trigger: "12" }, + { value: "Italian", label: "Italian", trigger: "12" }, + ], + }, + { + id: "12", + message: "Here's a popular {previousValue} recipe:\n\n**Ingredients**:\n - 1 cup rice\n - 1 tbsp soy sauce\n - 1 egg\n - 1 cup mixed veggies\n**Method**:\n 1. Heat oil and sauté veggies. \n 2. Add cooked rice and soy sauce. \n 3. Scramble egg and mix it in. Serve hot!", + trigger: "13", + }, + { + id: "13", + message: "Would you like to try another recipe or request a dish from a vendor?", + trigger: "5", // Give the user the option to go back to the menu + }, + // ------------------- Explore Vendor Flow ------------------- + { + id: "16", + message: "Here are some popular vendors on Alimento:", + trigger: "17", + }, + { + id: "17", + options: [ + { value: "Rajesh's Diner", label: "Rajesh's Diner (Indian)", trigger: "18" }, + { value: "Chen's Kitchen", label: "Chen's Kitchen (Chinese)", trigger: "18" }, + { value: "Bella's Pizzeria", label: "Bella's Pizzeria (Italian)", trigger: "18" }, + ], + }, + { + id: "18", + message: "{previousValue} specializes in {previousValue.split(' ')[1]} cuisine. Here are some of their offerings:\n - Butter Chicken (₹300)\n - Chicken Biryani (₹250)\n - Tandoori Roti (₹40)\n\nRating: 4.5/5\nWould you like to request a dish or explore other vendors?", + trigger: "5", + }, + // ------------------- Thank you message ------------------- + { + id: "14", + message: "Thank you for using Alimento! Enjoy your food adventures!", + end: true, // End the chat + }, + ]; + + return ( +
+ +
+ ); +}; + +export default Chatbot; diff --git a/alimento-nextjs/components/chatbot/index.js b/alimento-nextjs/components/chatbot/index.js new file mode 100644 index 0000000..b111bcb --- /dev/null +++ b/alimento-nextjs/components/chatbot/index.js @@ -0,0 +1,18 @@ +import React from "react"; +import ChatBot from 'react-simple-chatbot'; +import Wrapper from './styles'; +import steps from './steps'; + + +function ChatbotWrapper() { + return ( + + + + ); +} + +export default ChatbotWrapper; \ No newline at end of file diff --git a/alimento-nextjs/components/chatbot/steps.ts b/alimento-nextjs/components/chatbot/steps.ts new file mode 100644 index 0000000..fcb0629 --- /dev/null +++ b/alimento-nextjs/components/chatbot/steps.ts @@ -0,0 +1,40 @@ +export default [ + { + id: '1', + message: 'What is your name?', + trigger: '2', + }, + { + id: '2', + user: true, + trigger: '3', + }, + { + id: '3', + message: 'Hi {previousValue}, nice to meet you!', + trigger: '4', + }, + { + id: '4', + message: 'Select any service to proceed', + trigger: '5', + }, + { + id: '5', + options: [ + { value: "Laundry", label: 'Laundry', trigger: '7' }, + { value: "Cleaning", label: 'Cleaning', trigger: '7' }, + { value: "AC repair", label: 'AC repair', trigger: '6' }, + ], + }, + { + id: '6', + message: 'Sorry! we are not operating {previousValue} right now ', + trigger: '2', + }, + { + id: '7', + message: 'Awesome! We will be connecting you to our {previousValue} service executive!', + end: true, + }, +]; \ No newline at end of file diff --git a/alimento-nextjs/components/chatbot/styles.js b/alimento-nextjs/components/chatbot/styles.js new file mode 100644 index 0000000..6e4f264 --- /dev/null +++ b/alimento-nextjs/components/chatbot/styles.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +export default styled.div` + .rsc-os-option-element { + cursor: pointer; + } +`; \ No newline at end of file diff --git a/alimento-nextjs/next.config.ts b/alimento-nextjs/next.config.ts index 3f884aa..d319b51 100644 --- a/alimento-nextjs/next.config.ts +++ b/alimento-nextjs/next.config.ts @@ -11,6 +11,7 @@ const nextConfig: NextConfig = { }, ] }, + reactStrictMode: false, }; export default nextConfig; diff --git a/alimento-nextjs/package.json b/alimento-nextjs/package.json index e8fc500..33b009d 100644 --- a/alimento-nextjs/package.json +++ b/alimento-nextjs/package.json @@ -33,6 +33,7 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.53.1", "react-hot-toast": "^2.4.1", + "react-simple-chatbot": "^0.6.1", "react-toastify": "^10.0.6", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", diff --git a/alimento-nextjs/types/react-simple-chatbot.d.ts b/alimento-nextjs/types/react-simple-chatbot.d.ts new file mode 100644 index 0000000..6400ce2 --- /dev/null +++ b/alimento-nextjs/types/react-simple-chatbot.d.ts @@ -0,0 +1,35 @@ +declare module 'react-simple-chatbot' { + import * as React from 'react'; + + interface Step { + id: string; + message: string; + trigger: string; + user?: boolean; + end?: boolean; + delay?: number; + options?: { value: string; label: string; trigger: string }[]; + asMessage?: boolean; + } + + interface ChatBotProps { + steps: Step[]; + userMessage?: string; + onUserMessage?: (msg: string) => void; + placeholder?: string; + hideUserAvatar?: boolean; + hideBotAvatar?: boolean; + botAvatar?: string; + userAvatar?: string; + headerTitle?: string; + headerStyle?: React.CSSProperties; + botAvatarStyle?: React.CSSProperties; + userAvatarStyle?: React.CSSProperties; + customDelay?: number; + } + + const ChatBot: React.ComponentType; + + export default ChatBot; + } + \ No newline at end of file