Merge branch 'develop' into dependabot/npm_and_yarn/apps/dfda-1/publi…

…c/app/tar-6.2.1

apps/nextjs/.env.example

@@ -17,6 +17,10 @@ GOOGLE_CLIENT_SECRET=
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
 
+# https://resend.com/settings/smtp
+EMAIL_SERVER=smtp://username:[email protected]:587
+EMAIL_FROM=[email protected]
+
 # Database
 DATABASE_URL="postgresql://user:pass@localhost:5432/fdai_test?schema=public"
 

apps/nextjs/README.md

@@ -1,20 +1,32 @@
 # FDAi Next.js Example App
 
+
 This is an example app that demonstrates how to use the FDAi SDK with Next.js.
 
 ## Getting Started
 
-Copy `.env.example` to `.env.local` file in the root of the project. The following environment variables are supported:
+### Fork the repository
+
+First, fork the repository to your own GitHub account.
+
+### Clone the repository
+
+Clone the repository to your local machine.
+
+
+Copy `.env.example` to `.env` file in the root of the project. The following environment variables are supported:
 
 [https://builder.fdai.earth](https://builder.fdai.earth)
 - `FDAI_CLIENT_ID`: The client ID of your FDAi app.
 - `FDAI_CLIENT_SECRET`: The client secret of your FDAi app.
 
+See the .env file for how to get the rest of the required environment variables.
+
 
 First, install the dependencies:
 
 ```bash
-npm install
+yarn install
 ```
 
 Then, run the development server:

apps/nextjs/app/(auth)/signin/page.tsx

@@ -1,14 +1,14 @@
 import { Metadata } from "next"
 import Link from "next/link"
-
+import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
 import { UserAuthForm } from "@/components/user/user-auth-form"
 
 export const metadata: Metadata = {
-  title: "Enter Wishonia",
-  description: "Sign in to Wishonia",
+  title: siteConfig.name,
+  description: "Sign in to your account",
 }
 
 export default function Signin() {
@@ -28,9 +28,9 @@ export default function Signin() {
       </Link>
       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
         <div className="flex flex-col space-y-2 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight">Enter Wishonia</h1>
+          <h1 className="text-2xl font-semibold tracking-tight">Sign In</h1>
           <p className="text-sm text-muted-foreground">
-            Please confirm your identity
+            Sign in and accelerate clinical discovery
           </p>
         </div>
         <UserAuthForm />
@@ -40,7 +40,7 @@ export default function Signin() {
             href="/signup"
             className="hover:text-brand underline underline-offset-4"
           >
-            Become a citizen
+            Sign Up
           </Link>
         </p>
       </div>

apps/nextjs/app/(auth)/signup/page.tsx

@@ -29,10 +29,10 @@ export default function Signup() {
       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
         <div className="flex flex-col space-y-2 text-center">
           <h1 className="text-2xl font-semibold tracking-tight">
-            Become a Citizen of Wishonia
+            Join the Decentralized FDA
           </h1>
           <p className="text-sm text-muted-foreground">
-            Select a provider to verify your identity
+            Become a citizen scientist and accelerate clinical discovery
           </p>
         </div>
         <UserAuthForm />

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/landing-navbar.tsx

@@ -7,6 +7,7 @@ import Link from "next/link"
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import {useUserLoggedIn} from "@/lib/useUserLoggedIn";
+import { siteConfig } from "@/config/site";
 
 const font = Montserrat({ weight: '600', subsets: ['latin'] });
 
@@ -19,7 +20,7 @@ export const LandingNavbar = () => {
           <Image fill alt="Logo" src="/logo.png" />
         </div>
         <h1 className={cn("text-2xl font-bold text-white", font.className)}>
-          Wishonia
+          {siteConfig.name}
         </h1>
       </Link>
       <div className="flex items-center gap-x-2">
@@ -31,4 +32,4 @@ export const LandingNavbar = () => {
       </div>
     </nav>
   )
-}
+}