diff --git a/components/FAQ/index.tsx b/components/FAQ/index.tsx new file mode 100644 index 000000000..09b6cb27b --- /dev/null +++ b/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 = ({ onClick }) => { + return ( +
+
+

#FAQ

+
    + {FAQs.map((question) => ( +
  • +

    onClick(question)}>{question}

    +
    • + ))} +
+
+
+ ); +}; + +export default FAQ; diff --git a/components/PopularCategories/index.tsx b/components/PopularCategories/index.tsx new file mode 100644 index 000000000..edd72126c --- /dev/null +++ b/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 = ({onClick}) => { + return ( +
+
+
    + {categories.map((category, index) => ( +
  • onClick(category)}>{category}
    • + ))} +
+
+
+ ); +}; + +export default PopularCategories; diff --git a/config/pinecone.ts b/config/pinecone.ts index ce2dadaad..20ab82652 100644 --- a/config/pinecone.ts +++ b/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 }; diff --git a/docs/Delivering_Growth.pdf b/docs/Delivering_Growth.pdf new file mode 100644 index 000000000..09fba3c17 Binary files /dev/null and b/docs/Delivering_Growth.pdf differ diff --git a/docs/Industrial_Strategy.pdf b/docs/Industrial_Strategy.pdf new file mode 100644 index 000000000..f8fa726f6 Binary files /dev/null and b/docs/Industrial_Strategy.pdf differ diff --git a/docs/Jobs_Economy_Strategy.pdf b/docs/Jobs_Economy_Strategy.pdf new file mode 100644 index 000000000..dd91c17ad Binary files /dev/null and b/docs/Jobs_Economy_Strategy.pdf differ diff --git a/docs/Public_Services.pdf b/docs/Public_Services.pdf new file mode 100644 index 000000000..ef5db9729 Binary files /dev/null and b/docs/Public_Services.pdf differ diff --git a/docs/Safe_Secure_Communities.pdf b/docs/Safe_Secure_Communities.pdf new file mode 100644 index 000000000..c48fcf1a6 Binary files /dev/null and b/docs/Safe_Secure_Communities.pdf differ diff --git a/docs/Supporting_Families.pdf b/docs/Supporting_Families.pdf new file mode 100644 index 000000000..4ae40026e Binary files /dev/null and b/docs/Supporting_Families.pdf differ diff --git a/docs/Trade.pdf b/docs/Trade.pdf new file mode 100644 index 000000000..9eb26d64e Binary files /dev/null and b/docs/Trade.pdf differ diff --git a/pages/index.tsx b/pages/index.tsx index cadf96f6b..cdcad2d1e 100644 --- a/pages/index.tsx +++ b/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(''); @@ -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(null); const textAreaRef = useRef(null); + const submitBtnRef = useRef(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 ( <>

- Chat With Your Docs + Chat with Labour Party Policy.

+
+
+ + handleClickOnCategory(question, false)} /> +
{messages.map((message, index) => { @@ -137,7 +168,7 @@ export default function Home() { icon = ( AI
+
@@ -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 ? (
@@ -251,6 +284,7 @@ export default function Home() { )} + {messageState.history.length ? : null}
{error && ( @@ -261,8 +295,8 @@ export default function Home() {
diff --git a/public/AI_piano_keys.png b/public/AI_piano_keys.png new file mode 100644 index 000000000..513c04e5e Binary files /dev/null and b/public/AI_piano_keys.png differ diff --git a/public/User_Dino_Water.jpeg b/public/User_Dino_Water.jpeg new file mode 100644 index 000000000..f12c447e0 Binary files /dev/null and b/public/User_Dino_Water.jpeg differ diff --git a/public/bot_pic.png b/public/bot_pic.png new file mode 100644 index 000000000..d60892462 Binary files /dev/null and b/public/bot_pic.png differ diff --git a/public/hallucipianist.jpeg b/public/hallucipianist.jpeg new file mode 100644 index 000000000..1f53a84c9 Binary files /dev/null and b/public/hallucipianist.jpeg differ diff --git a/public/user_avtar.png b/public/user_avtar.png new file mode 100644 index 000000000..4663566cd Binary files /dev/null and b/public/user_avtar.png differ diff --git a/styles/Home.module.css b/styles/Home.module.css index 914898e77..1a08b6e17 100644 --- a/styles/Home.module.css +++ b/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; +} \ No newline at end of file diff --git a/styles/left-sidebar.module.css b/styles/left-sidebar.module.css new file mode 100644 index 000000000..c0ff7da6f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/utils/makechain.ts b/utils/makechain.ts index 45f6f1dff..81b7891b4 100644 --- a/utils/makechain.ts +++ b/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}