Merge pull request #178 from mikepsinn/develop

Added chat components

apps/nextjs/app/chat/layout.tsx

@@ -0,0 +1,34 @@
+import { dashboardLinks } from "@/config/links"
+import { getCurrentUser } from "@/lib/session"
+import Footer from "@/components/layout/footer"
+import Navbar from "@/components/layout/navbar"
+import { DashboardNav } from "@/components/pages/dashboard/dashboard-nav"
+
+interface DashboardLayoutProps {
+  children: React.ReactNode
+}
+
+export default async function DashboardLayout({
+  children,
+}: DashboardLayoutProps) {
+  const user = await getCurrentUser()
+
+  return (
+    <div className="flex min-h-screen flex-col space-y-6">
+      <Navbar
+        user={{
+          name: user?.name,
+          image: user?.image,
+          email: user?.email,
+        }}
+      />
+      <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
+        <aside className="hidden w-[200px] flex-col md:flex">
+          <DashboardNav items={dashboardLinks.data} />
+        </aside>
+        <main className="flex w-full flex-1 flex-col">{children}</main>
+      </div>
+      <Footer />
+    </div>
+  )
+}

apps/nextjs/app/chat/page.tsx

@@ -0,0 +1,38 @@
+import { Metadata } from "next"
+import { redirect } from "next/navigation"
+
+import { authOptions } from "@/lib/auth"
+import { getCurrentUser } from "@/lib/session"
+import { Shell } from "@/components/layout/shell"
+import { DashboardHeader } from "@/components/pages/dashboard/dashboard-header"
+import ChatComponent from '@/components/chat-component';
+
+export const metadata: Metadata = {
+  title: "Chat",
+  description: "Monitor your progress.",
+}
+
+interface DashboardProps {
+  searchParams: { from: string; to: string }
+}
+
+export default async function Dashboard({ searchParams }: DashboardProps) {
+  const user = await getCurrentUser()
+
+  if (!user) {
+    redirect(authOptions?.pages?.signIn || "/signin")
+  }
+
+
+  const layout = "grid grid-cols-1 gap-4 md:grid-cols-2";
+
+  return (
+    <Shell>
+      <DashboardHeader heading="Your Data" text="Monitor your symptoms and factors.">
+      </DashboardHeader>
+      <div className={layout}>
+        <ChatComponent></ChatComponent>
+      </div>
+    </Shell>
+  )
+}

apps/nextjs/app/survey/page.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import dynamic from "next/dynamic"
+import styled from "styled-components"
+const SurveyComponent = dynamic(() => import("../components/survey"), {
+  ssr: false,
+})
+const Container = styled.div`
+  margin: 2rem;
+`
+const Survey = () => {
+  return (
+    <Container>
+      <SurveyComponent />
+    </Container>
+  )
+}
+export default Survey

apps/nextjs/components/chat-component.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { FullPageChat } from 'flowise-embed-react';
+
+export default function ChatComponent() {
+  return  <FullPageChat
+    chatflowid="3a94fd29-fbe1-4318-a67b-a3fb5b6f74a8"
+    apiHost="https://fw.fdai.earth"
+    theme={{
+      chatWindow: {
+        welcomeMessage: "Hello! This is custom welcome message",
+        backgroundColor: "#ffffff",
+        height: 700,
+        width: 400,
+        fontSize: 16,
+        poweredByTextColor: "#303235",
+        botMessage: {
+          backgroundColor: "#f7f8ff",
+          textColor: "#303235",
+          showAvatar: true,
+          avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png",
+        },
+        userMessage: {
+          backgroundColor: "#3B81F6",
+          textColor: "#ffffff",
+          showAvatar: true,
+          avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
+        },
+        textInput: {
+          placeholder: "Type your question",
+          backgroundColor: "#ffffff",
+          textColor: "#303235",
+          sendButtonColor: "#3B81F6",
+        }
+      }
+    }}
+  />
+}

apps/nextjs/components/deep-chat-component.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+// !!Useful links at the bottom!!
+// import {DeepChat as DeepChatCore} from 'deep-chat'; <- type
+//import styles from './style.module.css';
+import dynamic from 'next/dynamic';
+
+export default function DeepChatComponent() {
+  return         <FullPageChat
+    chatflowid="3a94fd29-fbe1-4318-a67b-a3fb5b6f74a8"
+    apiHost="https://fw.fdai.earth"
+    theme={{
+      chatWindow: {
+        welcomeMessage: "Hello! This is custom welcome message",
+        backgroundColor: "#ffffff",
+        height: 700,
+        width: 400,
+        fontSize: 16,
+        poweredByTextColor: "#303235",
+        botMessage: {
+          backgroundColor: "#f7f8ff",
+          textColor: "#303235",
+          showAvatar: true,
+          avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png",
+        },
+        userMessage: {
+          backgroundColor: "#3B81F6",
+          textColor: "#ffffff",
+          showAvatar: true,
+          avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
+        },
+        textInput: {
+          placeholder: "Type your question",
+          backgroundColor: "#ffffff",
+          textColor: "#303235",
+          sendButtonColor: "#3B81F6",
+        }
+      }
+    }}
+  />
+
+  const initialMessages = [
+    {
+      html: `
+      <div class="deep-chat-temporary-message">
+        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 5px">What do shrimps eat?</button>
+        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">Can a shrimp fry rice?</button>
+        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">What is a pistol shrimp?</button>
+      </div>`,
+      role: 'ai',
+    },
+    // { role: 'user', text: 'Hey, how are you today?' },
+    // { role: 'ai', text: 'I am doing very well!' },
+  ];
+
+  // need to import the component dynamically as it uses the 'window' property
+  const DeepChat = dynamic(
+    () => import('deep-chat-react').then((mod) => mod.DeepChat),
+    {
+      ssr: false,
+    }
+  );
+
+  // demo/style/textInput are examples of passing an object directly into a property
+  // initialMessages is an example of passing a state object into the property
+  return (
+    <>
+      <main>
+        <h1>Deep Chat</h1>
+        <DeepChat
+          demo={true}
+          style={{ borderRadius: '10px' }}
+          textInput={{ placeholder: { text: 'Welcome to the demo!' } }}
+          initialMessages={initialMessages}
+          messageStyles={{html: {shared: {bubble: {backgroundColor: 'unset', padding: '0px'}}}}}
+        />
+      </main>
+    </>
+  );
+}
+
+// Info to get a reference for the component:
+// https://github.com/OvidijusParsiunas/deep-chat/issues/59#issuecomment-1839483469
+
+// Info to add types to a component reference:
+// https://github.com/OvidijusParsiunas/deep-chat/issues/59#issuecomment-1839487740

apps/nextjs/components/survey/SurveyComponent.tsx

@@ -0,0 +1,27 @@
+// components/survey/index.tsx
+import React from "react"
+import * as Survey from "survey-react" // import surveyjs
+import { questions } from "./content" // these are the survey questions
+import { Container } from "./styles" // your styles here
+
+// Modern theme
+import "survey-react/modern.min.css"
+// Default theme
+// import 'survey-react/survey.min.css';
+
+const SurveyComponent = () => {
+  // Apply theme
+  Survey.StylesManager.applyTheme("modern")
+
+  // Create a modal
+  const survey = new Survey.Model(questions)
+
+  // Render the survey
+  return (
+    <Container className="container">
+      <Survey.Survey model={survey} />
+    </Container>
+  )
+}
+
+export default SurveyComponent