Labour policy branch

components/FAQ/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from '@/styles/left-sidebar.module.css';
+const FAQs = [
+  'What is the Labour Party?',
+  'What are the core beliefs of the Labour Party?',
+  'How has the Labour Party performed in recent elections?',
+  'What\'s the difference between "Old Labour" and "New Labour"?',
+  'How is the leader of the Labour Party chosen?',
+  'What is the relationship between the Labour Party and trade unions?',
+  'Where can I find the Labour Party\'s official policies?'
+];
+
+type Prop = {
+  onClick: (query: string) => unknown;
+};
+
+const FAQ: React.FC<Prop> = ({ onClick }) => {
+  return (
+    <article className={styles.faq}>
+      <section>
+        <h4>#FAQ</h4>
+        <ul>
+          {FAQs.map((question) => (
+            <li>
+              <p onClick={() => onClick(question)}>{question}</p>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </article>
+  );
+};
+
+export default FAQ;

components/PopularCategories/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from '@/styles/left-sidebar.module.css';
+
+
+const categories = [
+  'Competition Policy',
+  'Corporate Governance',
+  'Procurement',
+  'Pillars of strategy',
+  'industrial strategy'
+];
+type Props = {
+  onClick: (category: string) => unknown;
+};
+const PopularCategories:React.FC<Props> = ({onClick}) => {
+  return (
+    <article className={styles.pop_cat_article}>
+      <section>
+        <ul className={styles.popular_categories}>
+          {categories.map((category, index) => (
+            <li key={index} onClick={() => onClick(category)}>{category}</li>
+          ))}
+        </ul>
+      </section>
+    </article>
+  );
+};
+
+export default PopularCategories;

config/pinecone.ts

@@ -8,6 +8,6 @@ if (!process.env.PINECONE_INDEX_NAME) {
 
 const PINECONE_INDEX_NAME = process.env.PINECONE_INDEX_NAME ?? '';
 
-const PINECONE_NAME_SPACE = 'pdf-test'; //namespace is optional for your vectors
+const PINECONE_NAME_SPACE = 'labour_namespace'; //namespace is optional for your vectors
 
 export { PINECONE_INDEX_NAME, PINECONE_NAME_SPACE };

pages/index.tsx

@@ -12,6 +12,8 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@/components/ui/accordion';
+import PopularCategories from '@/components/PopularCategories';
+import FAQ from '@/components/FAQ';
 
 export default function Home() {
   const [query, setQuery] = useState<string>('');
@@ -25,7 +27,7 @@ export default function Home() {
   }>({
     messages: [
       {
-        message: 'Hi, what would you like to learn about this document?',
+        message: 'Hi, what would you like to learn about labour party policy?',
         type: 'apiMessage',
       },
     ],
@@ -36,23 +38,25 @@ export default function Home() {
 
   const messageListRef = useRef<HTMLDivElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const submitBtnRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     textAreaRef.current?.focus();
   }, []);
 
+
   //handle form submission
-  async function handleSubmit(e: any) {
+  async function handleSubmit(e: any, text = '') {
     e.preventDefault();
 
     setError(null);
 
-    if (!query) {
+    if (!query && !text) {
       alert('Please input a question');
       return;
     }
 
-    const question = query.trim();
+    const question = text ? text.trim() : query.trim();
 
     setMessageState((state) => ({
       ...state,
@@ -120,14 +124,41 @@ export default function Home() {
     }
   };
 
+  const handleClickOnCategory = (category = '', hasPrefix=true) => {
+    if(hasPrefix)
+      setQuery(`Tell me about ${category}`);
+    else
+      setQuery(category);
+    const ev = new Event('submit');
+    handleSubmit(ev, hasPrefix ? `Tell me about ${category}` : category);
+
+  }
+
+  const clearHistory = () => {
+    setMessageState({
+      messages: [
+        {
+          message: 'Hi, what would you like to learn about labour party policy?',
+          type: 'apiMessage',
+        },
+      ],
+      history: [],
+    });
+  }
+
   return (
     <>
       <Layout>
         <div className="mx-auto flex flex-col gap-4">
           <h1 className="text-2xl font-bold leading-[1.1] tracking-tighter text-center">
-            Chat With Your Docs
+            Chat with Labour Party Policy.
           </h1>
           <main className={styles.main}>
+          <div className={styles.topsection}>
+            <div className={styles.leftContainer}>
+                <PopularCategories onClick={handleClickOnCategory} />
+                <FAQ onClick={(question) => handleClickOnCategory(question, false)} />
+              </div>
             <div className={styles.cloud}>
               <div ref={messageListRef} className={styles.messagelist}>
                 {messages.map((message, index) => {
@@ -137,7 +168,7 @@ export default function Home() {
                     icon = (
                       <Image
                         key={index}
-                        src="/bot-image.png"
+                        src="/bot_pic.png"
                         alt="AI"
                         width="40"
                         height="40"
@@ -150,7 +181,7 @@ export default function Home() {
                     icon = (
                       <Image
                         key={index}
-                        src="/usericon.png"
+                        src="/user_avtar.png"
                         alt="Me"
                         width="30"
                         height="30"
@@ -209,6 +240,7 @@ export default function Home() {
                 })}
               </div>
             </div>
+            </div>
             <div className={styles.center}>
               <div className={styles.cloudform}>
                 <form onSubmit={handleSubmit}>
@@ -224,7 +256,7 @@ export default function Home() {
                     placeholder={
                       loading
                         ? 'Waiting for response...'
-                        : 'What is this legal case about?'
+                        : 'Ask about growth strategy, jobs, public services, families and communities, and trade'
                     }
                     value={query}
                     onChange={(e) => setQuery(e.target.value)}
@@ -234,6 +266,7 @@ export default function Home() {
                     type="submit"
                     disabled={loading}
                     className={styles.generatebutton}
+                    ref={submitBtnRef}
                   >
                     {loading ? (
                       <div className={styles.loadingwheel}>
@@ -251,6 +284,7 @@ export default function Home() {
                     )}
                   </button>
                 </form>
+                {messageState.history.length ? <button onClick={clearHistory}>CLEAR</button>: null}
               </div>
             </div>
             {error && (
@@ -261,8 +295,8 @@ export default function Home() {
           </main>
         </div>
         <footer className="m-auto p-4">
-          <a href="https://twitter.com/mayowaoshin">
-            Powered by LangChainAI. Demo built by Mayo (Twitter: @mayowaoshin).
+          <a href="https://github.com/YimmyYohnson/gpt4-pdf-chatbot-langchain-musicneuro-chat">
+            Powered by LangChainAI. Version available on GitHub
           </a>
         </footer>
       </Layout>

styles/Home.module.css

@@ -4,6 +4,11 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
+  .topsection {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+  }
 }
 
 .header {
@@ -98,6 +103,7 @@
   background: #ffffff;
   padding: 1.5rem;
   color: #000;
+  align-items: center;
 }
 
 .usermessagewaiting {
@@ -125,6 +131,7 @@
   padding: 1.5rem;
   color: #000;
   animation: fadein 0.5s;
+  align-items: center ;
 }
 
 @keyframes fadein {
@@ -189,7 +196,7 @@
 }
 
 .cloud {
-  width: 75vw;
+  width: 70vw;
   height: 65vh;
   background: #ffffff;
   border-radius: 0.5rem;
@@ -260,3 +267,8 @@
     text-align: center;
   }
 }
+
+.leftContainer{
+  display: flex;
+  flex-direction: column;
+}

styles/left-sidebar.module.css

@@ -0,0 +1,48 @@
+.pop_cat_article{
+    background-color: rgb(240, 240, 240);
+    height: 150px;
+    border-radius: 8px;
+    overflow-y: scroll;
+    width: 200px;
+
+}
+.popular_categories {
+    padding: 10px;
+    display: flex;
+    flex-wrap: wrap;
+
+}
+.popular_categories li {
+    margin: 2px;
+    background-color: rgb(0, 0, 0);
+    color: #FFF;
+    padding: 2px 5px;
+    border-radius: 5px;
+}
+
+.popular_categories li:hover {
+    background-color: #ffffff;
+    cursor: pointer;
+    color: #000;
+}
+
+.faq{
+    background-color: #000;
+    color: #FFF;
+    margin-top: 5px;
+    border-radius: 8px;
+    padding: 10px;
+    flex-grow: 1;
+    width: 200px;
+    overflow-y: scroll;
+    max-height: 300px;
+}
+
+.faq p {
+    padding: 5px 0;
+}
+
+.faq p:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}

utils/makechain.ts

@@ -9,9 +9,8 @@ Chat History:
 Follow Up Input: {question}
 Standalone question:`;
 
-const QA_PROMPT = `You are a helpful AI assistant. Use the following pieces of context to answer the question at the end.
-If you don't know the answer, just say you don't know. DO NOT try to make up an answer.
-If the question is not related to the context, politely respond that you are tuned to only answer questions that are related to the context.
+const QA_PROMPT = `You are a specialist in labour party policy. Use the following pieces of context to provide a detailed answer to the question at the end. Then provide practical suggestions on how these policies may affect people.
+If the answer is not in the context, clarify that policy is still being developed as of summer 2023.
 
 {context}