added text starter question generation

src/pages/sidePanel/QandA.ts

@@ -12,6 +12,8 @@ import { RunnablePassthrough, RunnableSequence } from 'langchain/schema/runnable
 import { RecursiveCharacterTextSplitter } from 'langchain/text_splitter';
 import { formatDocumentsAsString } from 'langchain/util/document';
 import { VoyVectorStore } from 'langchain/vectorstores/voy';
+import { ContextualCompressionRetriever } from 'langchain/retrievers/contextual_compression';
+import { EmbeddingsFilter } from 'langchain/retrievers/document_compressors/embeddings_filter';
 import { type TextItem } from 'pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js';
 import * as PDFLib from 'pdfjs-dist';
 import { Voy as VoyClient } from 'voy-search';
@@ -37,6 +39,7 @@ export type EmbedDocsOutput = {
   pageURL?: string;
   tabID?: number;
   fileName?: string;
+  starterQuestions?: string[];
 };
 export async function embedDocs(selectedModel, localFile): Promise<EmbedDocsOutput> {
   console.log('Embedding documents');
@@ -71,12 +74,53 @@ export async function embedDocs(selectedModel, localFile): Promise<EmbedDocsOutp
   const splitDocs = await splitter.splitDocuments(documents);
   await vectorstore.addDocuments(splitDocs);
   console.log('Added documents to vectorstore');
-
   return pageContent
     ? ({ vectorstore, pageURL: pageContent.pageURL, tabID: pageContent.tabID } as EmbedDocsOutput)
     : ({ vectorstore, fileName: localFile.name } as EmbedDocsOutput);
 }
 
+export async function getDefaultStarterQuestions(selectedParams, vectorStore) {
+  try {
+    console.log('getDefaultStarterQuestions', selectedParams);
+    const llm = new Ollama({
+      baseUrl: OLLAMA_BASE_URL,
+      model: selectedParams.model.name,
+      temperature: selectedParams.temperature,
+    });
+    console.log('vectorStore', vectorStore);
+    const retriever = vectorStore.asRetriever();
+
+    const generateStarterQuestionsPrompt = `
+    Given the following context and metadata, generate 1-2 questions that can be asked about the context.
+    Return the questions as a list of strings. No additional output is needed. No numbers needed. Format output as JSON array of strings.
+
+    {context}
+
+    Metadata:
+    {metadata}
+    `;
+
+    const starterQPrompt = PromptTemplate.fromTemplate(generateStarterQuestionsPrompt);
+    const chain = RunnableSequence.from([
+      {
+        context: retriever.pipe(formatDocumentsAsString),
+        metadata: retriever.pipe(documents => getMetadataString(documents)),
+      },
+      starterQPrompt,
+      llm,
+      new StringOutputParser(),
+    ]);
+
+    const resultString = await chain.invoke('');
+    const resultArray = JSON.parse(resultString); // Parse the JSON string to an array
+    return resultArray;
+  } catch (error) {
+    console.error('Error in getDefaultStarterQuestions:', error);
+    // Handle the error or return an empty array/fallback value
+    return [];
+  }
+}
+
 export async function* talkToDocument(selectedParams, vectorStore, input: ConversationalRetrievalQAChainInput) {
   console.log('talkToDocument', selectedParams);
   const llm = new Ollama({
@@ -87,7 +131,19 @@ export async function* talkToDocument(selectedParams, vectorStore, input: Conver
   console.log('question', input.question);
   console.log('chat_history', input.chat_history);
   console.log('vectorStore', vectorStore);
-  const retriever = vectorStore.asRetriever();
+  let retriever = vectorStore.asRetriever();
+  if (input.chat_history.length !== 0) {
+    const baseCompressor = new EmbeddingsFilter({
+      embeddings: new HuggingFaceTransformersEmbeddings({
+        modelName: 'Xenova/jina-embeddings-v2-small-en',
+      }),
+      similarityThreshold: 0.6,
+    });
+    retriever = new ContextualCompressionRetriever({
+      baseCompressor,
+      baseRetriever: vectorStore.asRetriever(),
+    });
+  }
   const condenseQuestionTemplate = `Given the following conversation and a follow up question, rephrase the follow up question to be a standalone question.
 
   Chat History:
@@ -125,7 +181,7 @@ export async function* talkToDocument(selectedParams, vectorStore, input: Conver
     {
       context: retriever.pipe(formatDocumentsAsString),
       question: new RunnablePassthrough(),
-      metadata: retriever.pipe(documents => getMetadataString(documents[0].metadata)),
+      metadata: retriever.pipe(documents => getMetadataString(documents)),
     },
     prompt,
     llm,
@@ -139,18 +195,27 @@ export async function* talkToDocument(selectedParams, vectorStore, input: Conver
   }
 }
 
-function getMetadataString(metadata) {
-  const result = [];
+function getMetadataString(documents: Document[]) {
+  try {
+    const metadata = documents[0].metadata;
+    if (!metadata) {
+      return '';
+    }
+    const result = [];
 
-  for (const key in metadata) {
-    // Check if the property is not an object and not an array
-    if (Object.prototype.hasOwnProperty.call(metadata, key) && typeof metadata[key] !== 'object') {
-      result.push(`${key}: ${metadata[key]}`);
+    for (const key in metadata) {
+      // Check if the property is not an object and not an array
+      if (Object.prototype.hasOwnProperty.call(metadata, key) && typeof metadata[key] !== 'object') {
+        result.push(`${key}: ${metadata[key]}`);
+      }
     }
-  }
-  console.log('result', result);
+    console.log('result', result);
 
-  return result.join(' ');
+    return result.join(' ');
+  } catch (e) {
+    console.log('error', e);
+    return '';
+  }
 }
 
 export const formatChatHistory = (chatHistory: { question: string; answer: string }[]) => {

src/pages/sidePanel/QandABubble.tsx

@@ -1,5 +1,5 @@
 import LinearProgress from '@mui/material/LinearProgress';
-import { talkToDocument, chatWithLLM } from '@root/src/pages/sidePanel/QandA';
+import { talkToDocument, chatWithLLM, getDefaultStarterQuestions } from '@root/src/pages/sidePanel/QandA';
 import { useEffect, useRef, useState } from 'react';
 import { BsFillArrowRightSquareFill } from 'react-icons/bs';
 import PageMetadata from '@root/src/pages/sidePanel/PageMetadata';
@@ -45,15 +45,24 @@ export function QandABubble({ taskType, selectedParams, vectorstore }) {
     e.target.style.height = 'auto'; // Reset the height
     e.target.style.height = `${e.target.scrollHeight}px`; // Set the height equal to the scroll height
   };
+  const [starterQuestions, setStarterQuestions] = useState([]);
   const handleKeyPress = e => {
     if (e.key === 'Enter' && !e.shiftKey) {
       // Check if Enter was pressed without the shift key
       e.preventDefault(); // Prevent the default action to avoid inserting a new line
       handleQandAAction(e); // Call your existing form submission handler
     }
   };
+  const fetchStarterQuestions = async () => {
+    console.log('getting default starter questions');
+    if (taskType === 'docs' || taskType === 'qanda') {
+      const defaultStarterQuestions = await getDefaultStarterQuestions(selectedParams, vectorstore.vectorstore);
+      setStarterQuestions(defaultStarterQuestions);
+    }
+  };
 
   useEffect(() => {
+    fetchStarterQuestions();
     setAnswer('');
     setQuestion('');
     setAnswering(false);
@@ -136,6 +145,28 @@ export function QandABubble({ taskType, selectedParams, vectorstore }) {
         )}
       </div>
       <div className="form-container" ref={formContainerRef}>
+        {chat_history.length === 0 && (
+          <div className="starter-questions">
+            <ul>
+              {starterQuestions.map((question, index) => (
+                <li
+                  key={index}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    setQuestion(question);
+                  }}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      setQuestion(question);
+                    }
+                  }}>
+                  {question}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
         <form onSubmit={handleQandAAction} className="qna-form">
           <div className="input-button-wrapper">
             <textarea
@@ -147,11 +178,7 @@ export function QandABubble({ taskType, selectedParams, vectorstore }) {
               className="question-input"
               disabled={answering}
             />
-            <button
-              type="submit"
-              className={`real-button ${question ? 'has-text' : ''}`}
-              disabled={answering} // this will disable the button when answering is true
-            >
+            <button type="submit" className={`real-button ${question ? 'has-text' : ''}`} disabled={answering}>
               <BsFillArrowRightSquareFill size="2rem" className={answering ? 'spin' : ''} />
             </button>
           </div>

src/pages/sidePanel/SidePanel.css

@@ -663,3 +663,87 @@
   background-color: #0056b3;
   /* Darker green */
 }
+
+.starter-questions {
+  margin: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  justify-content: center;
+}
+
+.starter-questions h3 {
+  color: #61dafb;
+  margin-bottom: 20px;
+}
+
+.starter-questions li {
+  background: rgba(255, 255, 255, 0.05);
+  color: white;
+  padding: 15px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  backdrop-filter: blur(10px);
+}
+
+.starter-questions li:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.starter-questions li:hover {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+/* If you have a title or description under the list, you might add something like this: */
+.description-text {
+  color: white;
+  font-size: 1rem;
+  margin: 20px;
+  text-align: center;
+}
+
+/* Style for the input field and submit button */
+.input-container {
+  max-width: 600px;
+  margin: 20px auto;
+  background: #333;
+  border-radius: 10px;
+  overflow: hidden;
+  /* To ensure the border-radius applies to children elements as well */
+}
+
+.input-container textarea {
+  width: calc(100% - 40px);
+  /* Adjust the width based on your padding */
+  padding: 20px;
+  border: none;
+  background: transparent;
+  color: white;
+  resize: none;
+  /* Disables resize handle */
+}
+
+.input-container button {
+  padding: 10px 15px;
+  border: none;
+  background: #61dafb;
+  /* Light blue to match the theme */
+  color: #282c34;
+  /* Dark text for contrast */
+  cursor: pointer;
+}
+
+.input-container button:hover {
+  background: #409ed2;
+  /* Slightly darker on hover */
+}
+
+/* You may need to adjust the max-width and padding based on your layout */