feat: add webapp

.github/ISSUE_TEMPLATE.md

@@ -1,10 +1,11 @@
 <!--
 IF SUFFICIENT INFORMATION IS NOT PROVIDED VIA THE FOLLOWING TEMPLATE THE ISSUE MIGHT BE CLOSED WITHOUT FURTHER CONSIDERATION OR INVESTIGATION
 -->
-> Please provide us with the following information:
-> ---------------------------------------------------------------
+
+> ## Please provide us with the following information:
 
 ### This issue is for a: (mark with an `x`)
+
 ```
 - [ ] bug report -> please search issues before submitting
 - [ ] feature request
@@ -13,21 +14,27 @@ IF SUFFICIENT INFORMATION IS NOT PROVIDED VIA THE FOLLOWING TEMPLATE THE ISSUE M
 ```
 
 ### Minimal steps to reproduce
+
 >
 
 ### Any log messages given by the failure
+
 >
 
 ### Expected/desired behavior
+
 >
 
 ### OS and Version?
+
 > Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)
 
 ### Versions
+
 >
 
 ### Mention any other details that might be useful
 
-> ---------------------------------------------------------------
+> ---
+>
 > Thanks! We'll be in touch soon.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,18 +1,24 @@
 ## Purpose
+
 <!-- Describe the intention of the changes being proposed. What problem does it solve or functionality does it add? -->
-* ...
+
+- ...
 
 ## Does this introduce a breaking change?
+
 <!-- Mark one with an "x". -->
+
 ```
 [ ] Yes
 [ ] No
 ```
 
 ## Pull Request Type
+
 What kind of change does this Pull Request introduce?
 
 <!-- Please check the one that applies to this PR using "x". -->
+
 ```
 [ ] Bugfix
 [ ] Feature
@@ -23,7 +29,8 @@ What kind of change does this Pull Request introduce?
 ```
 
 ## How to Test
-*  Get the code
+
+- Get the code
 
 ```
 git clone [repo-address]
@@ -32,14 +39,19 @@ git checkout [branch-name]
 npm install
 ```
 
-* Test the code
+- Test the code
 <!-- Add steps to run the tests suite and/or manually test -->
+
 ```
+
 ```
 
 ## What to Check
+
 Verify that the following are valid
-* ...
+
+- ...
 
 ## Other Information
-<!-- Add any other helpful information that may be needed here. -->
+
+<!-- Add any other helpful information that may be needed here. -->

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing to [project-title]
 
-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
+This project welcomes contributions and suggestions. Most contributions require you to agree to a
 Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
 the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
 
@@ -12,61 +12,67 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
 For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
 contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
 
- - [Code of Conduct](#coc)
- - [Issues and Bugs](#issue)
- - [Feature Requests](#feature)
- - [Submission Guidelines](#submit)
+- [Code of Conduct](#coc)
+- [Issues and Bugs](#issue)
+- [Feature Requests](#feature)
+- [Submission Guidelines](#submit)
 
 ## <a name="coc"></a> Code of Conduct
+
 Help us keep this project open and inclusive. Please read and follow our [Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 
 ## <a name="issue"></a> Found an Issue?
+
 If you find a bug in the source code or a mistake in the documentation, you can help us by
 [submitting an issue](#submit-issue) to the GitHub Repository. Even better, you can
 [submit a Pull Request](#submit-pr) with a fix.
 
 ## <a name="feature"></a> Want a Feature?
-You can *request* a new feature by [submitting an issue](#submit-issue) to the GitHub
-Repository. If you would like to *implement* a new feature, please submit an issue with
+
+You can _request_ a new feature by [submitting an issue](#submit-issue) to the GitHub
+Repository. If you would like to _implement_ a new feature, please submit an issue with
 a proposal for your work first, to be sure that we can use it.
 
-* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
+- **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
 
 ## <a name="submit"></a> Submission Guidelines
 
 ### <a name="submit-issue"></a> Submitting an Issue
+
 Before you submit an issue, search the archive, maybe your question was already answered.
 
 If your issue appears to be a bug, and hasn't been reported, open a new issue.
 Help us to maximize the effort we can spend fixing issues and adding new
-features, by not reporting duplicate issues.  Providing the following information will increase the
+features, by not reporting duplicate issues. Providing the following information will increase the
 chances of your issue being dealt with quickly:
 
-* **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
-* **Version** - what version is affected (e.g. 0.1.2)
-* **Motivation for or Use Case** - explain what are you trying to do and why the current behavior is a bug for you
-* **Browsers and Operating System** - is this a problem with all browsers?
-* **Reproduce the Error** - provide a live example or a unambiguous set of steps
-* **Related Issues** - has a similar issue been reported before?
-* **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
+- **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
+- **Version** - what version is affected (e.g. 0.1.2)
+- **Motivation for or Use Case** - explain what are you trying to do and why the current behavior is a bug for you
+- **Browsers and Operating System** - is this a problem with all browsers?
+- **Reproduce the Error** - provide a live example or a unambiguous set of steps
+- **Related Issues** - has a similar issue been reported before?
+- **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
   causing the problem (line of code or commit)
 
 You can file new issues by providing the above information at the corresponding repository's issues link: https://github.com/[organization-name]/[repository-name]/issues/new].
 
 ### <a name="submit-pr"></a> Submitting a Pull Request (PR)
+
 Before you submit your Pull Request (PR) consider the following guidelines:
 
-* Search the repository (https://github.com/[organization-name]/[repository-name]/pulls) for an open or closed PR
+- Search the repository (https://github.com/[organization-name]/[repository-name]/pulls) for an open or closed PR
   that relates to your submission. You don't want to duplicate effort.
 
-* Make your changes in a new git fork:
+- Make your changes in a new git fork:
+
+- Commit your changes using a descriptive commit message
+- Push your fork to GitHub:
+- In GitHub, create a pull request
+- If we suggest changes then:
 
-* Commit your changes using a descriptive commit message
-* Push your fork to GitHub:
-* In GitHub, create a pull request
-* If we suggest changes then:
-  * Make the required updates.
-  * Rebase your fork and force push to your GitHub repository (this will update your Pull Request):
+  - Make the required updates.
+  - Rebase your fork and force push to your GitHub repository (this will update your Pull Request):
 
     ```shell
     git rebase master -i

README.md

@@ -1,4 +1,3 @@
 # 🤖⚡ serverless-ai-langchainjs
 
 This sample shows how to build a serverless ChatGPT-like with Retrieval-Augmented Generation AI application using [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview), [Azure Functions](https://learn.microsoft.com/azure/azure-functions/functions-overview?pivots=programming-language-javascript) and the [LangChain.js library](https://js.langchain.com/). This can be used as a starting point for building more complex AI applications.
-

package.json

@@ -7,9 +7,11 @@
   "scripts": {
     "start": "echo not implemented",
     "start:webapp": "npm run start --workspace=webapp",
-    "start:api": "npm run start --workspace=api",
+    "start:api": "npm run dev --workspace=api",
     "build": "npm run build --workspaces --if-present",
     "clean": "echo not implemented",
+    "lint": "xo",
+    "lint:fix": "xo --fix",
     "format": "prettier --list-different --write .",
     "prepare": "simple-git-hooks || echo 'simple-git-hooks install skipped'"
   },
@@ -41,8 +43,7 @@
     "pre-commit": "npx lint-staged"
   },
   "lint-staged": {
-    "*.{js,ts}": "xo --fix",
-    "*": "prettier --write"
+    "*.{js,ts,json,md,yaml,yml,html,css}": "prettier --write"
   },
   "prettier": {
     "tabWidth": 2,

packages/webapp/README.md

@@ -0,0 +1,16 @@
+# Chat webapp
+
+This project uses [Vite](https://vitejs.dev/) as a frontend build tool, and [Lit](https://lit.dev/) as a web components library.
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+To start the app in dev mode.\
+Open [http://localhost:8000](http://localhost:8000) to view it in the browser.
+
+### `npm run build`
+
+To build the app for production to the `dist` folder.

packages/webapp/index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="description" content="ChatGPT with Enterprise Data" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <title>ChatGPT with Enterprise Data</title>
+    <style>
+      :root {
+        --azc-primary: #06b;
+        --azc-bg: #eee;
+        --azc-border-radius: 16px;
+      }
+      html,
+      body {
+        font-size: 16px;
+        margin: 0;
+        background: var(--azc-bg);
+      }
+      nav {
+        background: #333;
+        color: #fff;
+        padding: 16px;
+        font-family:
+          'Segoe UI',
+          -apple-system,
+          BlinkMacSystemFont,
+          Roboto,
+          'Helvetica Neue',
+          sans-serif;
+        font-size: 1.25rem;
+      }
+      azc-chat {
+        display: block;
+        max-width: 1024px;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <nav>ChatGPT with Enterprise Data</nav>
+    <azc-chat></azc-chat>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>

packages/webapp/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "webapp",
+  "version": "1.0.0",
+  "description": "Web app for the serverless ChatGPT RAG sample",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 8000 --host",
+    "build": "vite build",
+    "watch": "vite build --watch --minify false",
+    "lint": "lit-analyzer",
+    "clean": "npx rimraf dist"
+  },
+  "author": "Microsoft",
+  "license": "MIT",
+  "dependencies": {
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "lit-analyzer": "^2.0.1",
+    "vite": "^5.0.12"
+  },
+  "files": ["dist"]
+}