fix: misc fixes (#32)

* fix: documents links

* fix: show loader until first chunk

* fix: add missing env key

* docs: add demo gif

* refactor: improve splitting

* refactor: improve prompt

* refactor: improve local results

README.md

@@ -13,12 +13,12 @@
 <!-- [![Build Status](https://img.shields.io/github/actions/workflow/status/Azure-Samples/serverless-ai-langchainjs/build?style=flat-square)](https://github.com/Azure-Samples/serverless-ai-langchainjs/actions) -->
 <!-- [![Watch how to use this sample on YouTube](https://img.shields.io/badge/YouTube-Watch-d95652.svg?style=flat-square&logo=youtube)]() -->
 
-<!-- TODO: gif demo -->
-
 :star: If you like this sample, star it on GitHub — it helps a lot!
 
 [Overview](#overview) • [Get started](#get-started) • [Run the sample](#run-the-sample) • [Resources](#resources) • [FAQ](#faq) • [Troubleshooting](#troubleshooting)
 
+![Animation showing the chat app in action](./docs/images/demo.gif)
+
 </div>
 
 This sample shows how to build a serverless ChatGPT-like experience with Retrieval-Augmented Generation using [LangChain.js](https://js.langchain.com/) and Azure. The application is hosted on [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview) and [Azure Functions](https://learn.microsoft.com/azure/azure-functions/functions-overview?pivots=programming-language-javascript), with [Azure Cosmos DB for MongoDB vCore](https://learn.microsoft.com/azure/cosmos-db/mongodb/vcore/) as the vector database. You can use it as a starting point for building more complex AI applications.

packages/api/.env.sample

@@ -1,7 +1,8 @@
 # Azure OpenAI configuration
 AZURE_OPENAI_API_ENDPOINT="<your_endpoint>"
-AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME="<your_deployment_name>"
 AZURE_OPENAI_API_KEY="<your_key>"
+AZURE_OPENAI_API_DEPLOYMENT_NAME="<your_deployment_name>"
+AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME="<your_deployment_name>"
 
 # Azure CosmosDB for MongoDB vCore configuration
 AZURE_COSMOSDB_CONNECTION_STRING="<your_connection_string>"

packages/api/src/functions/chat-post.ts

@@ -17,12 +17,11 @@ import { badRequest, data, serviceUnavailable } from '../http-response';
 import { ollamaChatModel, ollamaEmbeddingsModel, faissStoreFolder } from '../constants';
 import { ChatRequest, ChatResponseChunk } from '../models';
 
-const systemPrompt = `Assistant helps the Consto Real Estate company customers with support questions regarding terms of service, privacy policy, and questions about support requests.
-Be brief in your answers.
-Answer ONLY with the facts listed in the list of sources below. If there isn't enough information below, say you don't know. Do not generate answers that don't use the sources below. If asking a clarifying question to the user would help, ask the question.
-Do not return markdown format. 
-If the question is not in English, answer in the language used in the question.
-Each source has a name followed by colon and the actual information, always include the source name for each fact you use in the response. Use square brackets to reference the source, for example: [info1.txt]. Don't combine sources, list each source separately, for example: [info1.txt][info2.pdf].
+const systemPrompt = `Assistant helps the Consto Real Estate company customers with questions and support requests. Be brief in your answers. Answer only in plain text format.
+Answer ONLY with information from the sources below. If there isn't enough information in the sources, say you don't know. Do not generate answers that don't use the sources. If asking a clarifying question to the user would help, ask the question.
+If the user question is not in English, answer in the language used in the question.
+
+Each source has the format "filename: information". ALWAYS reference the source filename for every part used in the answer. Use the format "[filename]" to reference a source, for example: [info1.txt]. List each source separately, for example: [info1.txt][info2.pdf].
 
 Generate 3 very brief follow-up questions that the user would likely ask next.
 Enclose the follow-up questions in double angle brackets. Example:
@@ -31,7 +30,7 @@ Enclose the follow-up questions in double angle brackets. Example:
 <<What If I break something?>>
 
 Do no repeat questions that have already been asked.
-Make sure the last question ends with ">>
+Make sure the last question ends with ">>".
 
 SOURCES:
 {context}`;

packages/api/src/functions/documents-post.ts

@@ -35,8 +35,8 @@ export async function uploadDocuments(request: HttpRequest, context: InvocationC
     rawDocument[0].metadata.filename = filename;
 
     const splitter = new RecursiveCharacterTextSplitter({
-      chunkSize: 2000,
-      chunkOverlap: 400,
+      chunkSize: 1500,
+      chunkOverlap: 100,
     });
     const documents = await splitter.splitDocuments(rawDocument);
 

packages/webapp/src/api.ts

@@ -31,7 +31,7 @@ export async function getCompletion(options: ChatRequestOptions) {
 }
 
 export function getCitationUrl(citation: string): string {
-  return `${apiBaseUrl}/documents/${citation}`;
+  return `${apiBaseUrl}/api/documents/${citation}`;
 }
 
 export class NdJsonParserStream extends TransformStream<string, JSON> {

packages/webapp/src/components/chat.ts

@@ -124,7 +124,6 @@ export class ChatComponent extends LitElement {
     try {
       const response = await getCompletion({ ...this.options, messages: this.messages });
       if (this.options.stream) {
-        this.isStreaming = true;
         const chunks = response as AsyncGenerator<ChatResponseChunk>;
         const { messages } = this;
         const message: ChatMessage = {
@@ -133,6 +132,7 @@ export class ChatComponent extends LitElement {
         };
         for await (const chunk of chunks) {
           if (chunk.choices[0].delta.content) {
+            this.isStreaming = true;
             message.content += chunk.choices[0].delta.content;
             this.messages = [...messages, message];
             this.scrollToLastMessage();