From cfa9adfbe7d1a9e568f4069753d93d18960905a1 Mon Sep 17 00:00:00 2001
From: Madhukar Kumar <madhukar.kumar@gmail.com>
Date: Thu, 15 Aug 2024 14:32:57 -0700
Subject: [PATCH] New Insight pages

Added new page and static insight component
---
 .gitignore                        |  1 +
 src/app/askinsights/page.tsx      | 80 +++++++++++++++++++++++++++++++
 src/app/component/InsightCard.tsx | 29 +++++++++++
 src/app/component/navbar.tsx      |  2 +-
 4 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 src/app/askinsights/page.tsx
 create mode 100644 src/app/component/InsightCard.tsx

diff --git a/.gitignore b/.gitignore
index fd3dbb5..00bba9b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
diff --git a/src/app/askinsights/page.tsx b/src/app/askinsights/page.tsx
new file mode 100644
index 0000000..700db98
--- /dev/null
+++ b/src/app/askinsights/page.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useChat } from 'ai/react';
+import { useState } from 'react';
+import NavBar from '../component/navbar';
+import InsightCard from '../component/InsightCard';
+
+export default function Home() {
+  const [waitingForAI, setWaitingForAI] = useState<Boolean>(false);
+  const { messages, input, handleInputChange, handleSubmit } = useChat();
+
+  return (
+    <div>
+      <NavBar />
+      <div
+        style={{height: '70vh', flexDirection: "column-reverse", display: "flex" }}
+      >
+        <>
+          {waitingForAI &&
+            (
+              <div className="loading">
+                <img src='/1484.gif' alt="Loading"></img>
+              </div>
+            )}
+        </>
+        <>
+          {messages.length == 0 &&
+            (
+              <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+                <img style={{ width: "25%", marginBottom: "2%" }} src='/singlestore_white.svg' alt="SingleStore Logo" />
+                <span style={{ marginBottom: '2%', fontSize: '40px', justifySelf: 'center' }}>+</span>
+                <img style={{ width: "8%", marginBottom: "2%" }} src='/openAI.svg' alt="OpenAI Logo" />
+              </div>
+            )
+          }
+        </>
+        <div className="pr-4 messages">
+          {messages.map(m => (
+            <div key={m.id}>
+              <div className="flex gap-3 my-4 text-gray-600 text-sm flex-1">
+                <span className="relative flex shrink-0 overflow-hidden rounded-full w-8 h-8" 
+                      style={{ margin: '30px', marginTop: '0px' }}>
+                  <div className="rounded-full bg-gray-100 border p-1">
+                    {m.role === 'user' ? (
+                      <img src="/user.png" alt="User" />
+                    ) : (
+                      <img src="/bot.png" alt="Bot" />
+                    )}
+                  </div>
+                </span>
+                <p className="leading-relaxed" style={{ color: 'aliceblue' }}>
+                  <span className="block font-bold">{m.role}</span>
+                  {m.content}
+                </p>
+              </div>
+              {m.role === 'assistant' && <InsightCard />}
+            </div>
+          ))}
+        </div>
+
+        <div className="flex items-center pt-0 chat-window">
+          <form className="flex items-center justify-center w-full space-x-2" onSubmit={handleSubmit}>
+            <input
+              value={input}
+              onChange={handleInputChange}
+              className="flex h-10 w-full rounded-md border border-[#e5e7eb] px-3 py-2 text-sm placeholder-[#6b7280] focus:outline-none focus:ring-2 focus:ring-[#9ca3af] disabled:cursor-not-allowed disabled:opacity-50 text-[#030712] focus-visible:ring-offset-2"
+              placeholder="Ask what you have in mind"
+            />
+            <button
+              type="submit"
+              className="inline-flex items-center justify-center rounded-md text-sm font-medium text-[#f9fafb] disabled:pointer-events-none disabled:opacity-50 bg-black hover:bg-[#111827E6] h-10 px-4 py-2"
+            >
+              Send
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/component/InsightCard.tsx b/src/app/component/InsightCard.tsx
new file mode 100644
index 0000000..52d223f
--- /dev/null
+++ b/src/app/component/InsightCard.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const InsightCard: React.FC = () => (
+  <div className="bg-purple-600 p-4 rounded-lg mt-2 text-sm max-w-[500px]">
+    <h3 className="font-bold mb-2 text-left">Insight Summary</h3>
+    <p>Number of tickets opened for the issue: 12</p>
+    <p>Average time to respond to the tickets: 4 min</p>
+    <div className="flex items-center">
+      <p className="mr-2">Total number of customers affected:</p>
+      <svg width="50" height="50" viewBox="0 0 50 50">
+        <circle cx="25" cy="25" r="25" fill="#3B82F6" /> {/* Blue background */}
+        <path
+          d="M25 25 L25 0 A25 25 0 0 1 48.3 32.7 Z"
+          fill="#10B981" // Green slice
+        />
+        <text x="25" y="28" textAnchor="middle" fill="white" fontSize="10">
+          12/521
+        </text>
+      </svg>
+    </div>
+    <p>Rev across affected customers 📊: $3.2 Million</p>
+    <div className="flex items-center">
+      <p className="mr-2">Sentiment of affected customers:</p>
+      <div className="w-4 h-4 rounded-full bg-yellow-400"></div>
+    </div>
+  </div>
+);
+
+export default InsightCard;
\ No newline at end of file
diff --git a/src/app/component/navbar.tsx b/src/app/component/navbar.tsx
index ce88966..f483d7b 100644
--- a/src/app/component/navbar.tsx
+++ b/src/app/component/navbar.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 const NavBar: React.FC = () => {
 
   return (
-    <nav style={{ backgroundColor: 'purple', padding: '1rem' }}>
+    <nav className="bg-purple-600 p-4">
       <ol style={{ listStyleType: 'none', margin: 10, padding: 0 }}>
         <img src='/singlestore_white.svg' width={"10%"} style={{ display: 'inline', marginLeft: '1rem' }} />
         <li style={{ display: 'inline', marginLeft: '5rem' }}>