├── .devcontainer ├── devcontainer.json └── postCreateCommand.sh ├── .github ├── CODE_OF_CONDUCT.md ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── azure-dev-validation.yml │ └── azure-dev.yml ├── .gitignore ├── .lintstagedrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── SECURITY.md ├── azure.yaml ├── docs └── assets │ └── architecture.png ├── icon.svg ├── index.html ├── infra ├── abbreviations.json ├── core │ ├── host │ │ └── staticwebapp.bicep │ ├── monitor │ │ ├── applicationinsights.bicep │ │ ├── loganalytics.bicep │ │ └── monitoring.bicep │ └── security │ │ └── role.bicep ├── main.bicep └── main.parameters.json ├── package-lock.json ├── package.json ├── playwright.config.ts ├── src ├── components │ ├── chat-action-button.ts │ ├── chat-component.ts │ ├── chat-controller.ts │ ├── chat-history-controller.ts │ ├── chat-stage.ts │ ├── chat-thread-component.ts │ ├── citation-list.ts │ ├── document-previewer.ts │ ├── link-icon.ts │ ├── loading-indicator.ts │ ├── tab-component.ts │ ├── teaser-list-component.ts │ └── voice-input-button.ts ├── config │ └── global-config.js ├── core │ ├── http │ │ └── index.ts │ ├── index.ts │ ├── parser │ │ └── index.ts │ └── stream │ │ ├── data-format │ │ └── ndjson.ts │ │ └── index.ts ├── index.ts ├── styles │ ├── chat-action-button.ts │ ├── chat-component.ts │ ├── chat-stage.ts │ ├── chat-thread-component.ts │ ├── citation-list.ts │ ├── link-icon.ts │ ├── loading-indicator.ts │ ├── tab-component.ts │ ├── teaser-list-component.ts │ └── voice-input-button.ts ├── svg │ ├── branding │ │ └── brand-logo.svg │ ├── bubblequestion-icon.svg │ ├── cancel-icon.svg │ ├── chevron-up-icon.svg │ ├── close-icon.svg │ ├── copy-icon.svg │ ├── delete-icon.svg │ ├── history-dismiss-icon.svg │ ├── history-icon.svg │ ├── lightbulb-icon.svg │ ├── mic-icon.svg │ ├── mic-record-on-icon.svg │ ├── question-icon.svg │ ├── readme.md │ ├── send-icon.svg │ ├── spinner-icon.svg │ └── success-icon.svg ├── types.d.ts ├── utils │ └── index.ts └── vite-env.d.ts ├── swa-cli.config.json ├── tests └── e2e │ ├── frontendchatapp.spec.ts │ └── hars │ ├── citation-content.har │ ├── default-ask-response.har │ ├── default-chat-response-nostream.har │ ├── default-chat-response-stream.har │ └── error-chat-response-stream.har ├── tsconfig.json └── vite.config.js /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 2 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node 3 | { 4 | "name": "Azure OpenAI Chat Frontend", 5 | 6 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 7 | "image": "mcr.microsoft.com/devcontainers/javascript-node:20-bullseye", 8 | 9 | // Features to add to the dev container. More info: https://containers.dev/features. 10 | "features": { 11 | "ghcr.io/devcontainers/features/node:1": { 12 | "version": "20" 13 | }, 14 | "ghcr.io/devcontainers/features/docker-in-docker:1": { 15 | "version": 20, 16 | "moby": "false" 17 | }, 18 | "ghcr.io/devcontainers/features/azure-cli:1": { 19 | "version": "latest", 20 | "installBicep": true 21 | }, 22 | "ghcr.io/azure/azure-dev/azd:latest": {} 23 | }, 24 | 25 | // Configure tool-specific properties. 26 | "customizations": { 27 | "vscode": { 28 | "extensions": [ 29 | "ms-azuretools.azure-dev", 30 | "ms-azuretools.vscode-bicep", 31 | "ms-azuretools.vscode-docker", 32 | "esbenp.prettier-vscode", 33 | "humao.rest-client", 34 | "GitHub.copilot", 35 | "runem.lit-plugin", 36 | "ms-playwright.playwright" 37 | ] 38 | } 39 | }, 40 | 41 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 42 | "forwardPorts": [8000], 43 | 44 | // Use 'postCreateCommand' to run commands after the container is created. 45 | "postCreateCommand": "bash ./.devcontainer/postCreateCommand.sh", 46 | 47 | // Set minimal host requirements for the container. 48 | "hostRequirements": { 49 | "memory": "8gb" 50 | } 51 | 52 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 53 | // "remoteUser": "root" 54 | } 55 | -------------------------------------------------------------------------------- /.devcontainer/postCreateCommand.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | echo "Installing dependencies..." 4 | npm install 5 | 6 | echo "Installing playwright browsers..." 7 | npx -y playwright install --with-deps 8 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 4 | > Please provide us with the following information: 5 | > --------------------------------------------------------------- 6 | 7 | ### This issue is for a: (mark with an `x`) 8 | ``` 9 | - [ ] bug report -> please search issues before submitting 10 | - [ ] feature request 11 | - [ ] documentation issue or request 12 | - [ ] regression (a behavior that used to work and stopped in a new release) 13 | ``` 14 | 15 | ### Minimal steps to reproduce 16 | > 17 | 18 | ### Any log messages given by the failure 19 | > 20 | 21 | ### Expected/desired behavior 22 | > 23 | 24 | ### OS and Version? 25 | > Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?) 26 | 27 | ### Versions 28 | > 29 | 30 | ### Mention any other details that might be useful 31 | 32 | > --------------------------------------------------------------- 33 | > Thanks! We'll be in touch soon. 34 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Purpose 2 | 3 | * ... 4 | 5 | ## Does this introduce a breaking change? 6 | 7 | ``` 8 | [ ] Yes 9 | [ ] No 10 | ``` 11 | 12 | ## Pull Request Type 13 | What kind of change does this Pull Request introduce? 14 | 15 | 16 | ``` 17 | [ ] Bugfix 18 | [ ] Feature 19 | [ ] Code style update (formatting, local variables) 20 | [ ] Refactoring (no functional changes, no api changes) 21 | [ ] Documentation content changes 22 | [ ] Other... Please describe: 23 | ``` 24 | 25 | ## How to Test 26 | * Get the code 27 | 28 | ``` 29 | git clone [repo-address] 30 | cd [repo-name] 31 | git checkout [branch-name] 32 | npm install 33 | ``` 34 | 35 | * Test the code 36 | 37 | ``` 38 | ``` 39 | 40 | ## What to Check 41 | Verify that the following are valid 42 | * ... 43 | 44 | ## Other Information 45 | -------------------------------------------------------------------------------- /.github/workflows/azure-dev-validation.yml: -------------------------------------------------------------------------------- 1 | name: Validate AZD template 2 | on: 3 | push: 4 | branches: [main, develop] 5 | paths: 6 | - 'infra/**' 7 | pull_request: 8 | branches: [main, develop] 9 | paths: 10 | - 'infra/**' 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout 17 | uses: actions/checkout@v4 18 | 19 | - name: Run Microsoft Security DevOps Analysis 20 | uses: microsoft/security-devops-action@preview 21 | id: msdo 22 | continue-on-error: true 23 | with: 24 | tools: templateanalyzer 25 | 26 | - name: Upload alerts to Security tab 27 | if: github.repository == 'Azure-Samples/azure-search-openai-javascript' 28 | uses: github/codeql-action/upload-sarif@v2 29 | with: 30 | sarif_file: ${{ steps.msdo.outputs.sarifFile }} -------------------------------------------------------------------------------- /.github/workflows/azure-dev.yml: -------------------------------------------------------------------------------- 1 | on: 2 | workflow_dispatch: 3 | push: 4 | # Run when commits are pushed to mainline branch (main or master) 5 | # Set this to the mainline branch you are using 6 | branches: 7 | - main 8 | - master 9 | 10 | # GitHub Actions workflow to deploy to Azure using azd 11 | # To configure required secrets for connecting to Azure, simply run `azd pipeline config` 12 | 13 | # Set up permissions for deploying with secretless Azure federated credentials 14 | # https://learn.microsoft.com/en-us/azure/developer/github/connect-from-azure?tabs=azure-portal%2Clinux#set-up-azure-login-with-openid-connect-authentication 15 | permissions: 16 | id-token: write 17 | contents: read 18 | 19 | jobs: 20 | build: 21 | runs-on: ubuntu-latest 22 | env: 23 | AZURE_CLIENT_ID: ${{ vars.AZURE_CLIENT_ID }} 24 | AZURE_TENANT_ID: ${{ vars.AZURE_TENANT_ID }} 25 | AZURE_SUBSCRIPTION_ID: ${{ vars.AZURE_SUBSCRIPTION_ID }} 26 | AZURE_ENV_NAME: ${{ vars.AZURE_ENV_NAME }} 27 | AZURE_LOCATION: ${{ vars.AZURE_LOCATION }} 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v4 31 | 32 | - name: Install azd 33 | uses: Azure/setup-azd@v1.0.0 34 | 35 | - name: Log in with Azure (Federated Credentials) 36 | if: ${{ env.AZURE_CLIENT_ID != '' }} 37 | run: | 38 | azd auth login ` 39 | --client-id "$Env:AZURE_CLIENT_ID" ` 40 | --federated-credential-provider "github" ` 41 | --tenant-id "$Env:AZURE_TENANT_ID" 42 | shell: pwsh 43 | 44 | - name: Log in with Azure (Client Credentials) 45 | if: ${{ env.AZURE_CREDENTIALS != '' }} 46 | run: | 47 | $info = $Env:AZURE_CREDENTIALS | ConvertFrom-Json -AsHashtable; 48 | Write-Host "::add-mask::$($info.clientSecret)" 49 | 50 | azd auth login ` 51 | --client-id "$($info.clientId)" ` 52 | --client-secret "$($info.clientSecret)" ` 53 | --tenant-id "$($info.tenantId)" 54 | shell: pwsh 55 | env: 56 | AZURE_CREDENTIALS: ${{ secrets.AZURE_CREDENTIALS }} 57 | 58 | - name: Provision Infrastructure 59 | run: azd provision --no-prompt 60 | env: 61 | AZD_INITIAL_ENVIRONMENT_CONFIG: ${{ secrets.AZD_INITIAL_ENVIRONMENT_CONFIG }} 62 | 63 | - name: Deploy Application 64 | run: azd deploy --no-prompt -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Azure az webapp deployment details 2 | .azure 3 | *_env 4 | 5 | # Unit test / coverage reports 6 | .tap/ 7 | packages/*/test-dist/ 8 | 9 | # Environments 10 | .env 11 | .env.* 12 | 13 | # NPM 14 | npm-debug.log* 15 | node_modules 16 | static/ 17 | dist/ 18 | 19 | # macOS 20 | *.DS_Store* 21 | 22 | # misc 23 | TODO 24 | /test-results/ 25 | /playwright-report/ 26 | /playwright/.cache/ 27 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,jsx,ts,tsx}": ["eslint --fix"], 3 | "*": ["prettier --ignore-unknown --write"] 4 | } 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Azure OpenAI Chat Frontend 2 | 3 | This project welcomes contributions and suggestions. Most contributions require you to agree to a 4 | Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us 5 | the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. 6 | 7 | When you submit a pull request, a CLA bot will automatically determine whether you need to provide 8 | a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions 9 | provided by the bot. You will only need to do this once across all repos using our CLA. 10 | 11 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 12 | For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or 13 | contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 14 | 15 | - [Code of Conduct](#coc) 16 | - [Issues and Bugs](#issue) 17 | - [Feature Requests](#feature) 18 | - [Submission Guidelines](#submit) 19 | 20 | ## Code of Conduct 21 | Help us keep this project open and inclusive. Please read and follow our [Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 22 | 23 | ## Found an Issue? 24 | If you find a bug in the source code or a mistake in the documentation, you can help us by 25 | [submitting an issue](#submit-issue) to the GitHub Repository. Even better, you can 26 | [submit a Pull Request](#submit-pr) with a fix. 27 | 28 | ## Want a Feature? 29 | You can *request* a new feature by [submitting an issue](#submit-issue) to the GitHub 30 | Repository. If you would like to *implement* a new feature, please submit an issue with 31 | a proposal for your work first, to be sure that we can use it. 32 | 33 | * **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr). 34 | 35 | ## Submission Guidelines 36 | 37 | ### Submitting an Issue 38 | Before you submit an issue, search the archive, maybe your question was already answered. 39 | 40 | If your issue appears to be a bug, and hasn't been reported, open a new issue. 41 | Help us to maximize the effort we can spend fixing issues and adding new 42 | features, by not reporting duplicate issues. Providing the following information will increase the 43 | chances of your issue being dealt with quickly: 44 | 45 | * **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps 46 | * **Version** - what version is affected (e.g. 0.1.2) 47 | * **Motivation for or Use Case** - explain what are you trying to do and why the current behavior is a bug for you 48 | * **Browsers and Operating System** - is this a problem with all browsers? 49 | * **Reproduce the Error** - provide a live example or a unambiguous set of steps 50 | * **Related Issues** - has a similar issue been reported before? 51 | * **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be 52 | causing the problem (line of code or commit) 53 | 54 | You can file new issues by providing the above information at the corresponding [repository's issues link](https://github.com/Azure-Samples/azure-openai-chat-frontend/issues/new). 55 | 56 | ### Submitting a Pull Request (PR) 57 | Before you submit your Pull Request (PR) consider the following guidelines: 58 | 59 | * Search the repository for an [open or closed PR](https://github.com/Azure-Samples/azure-openai-chat-frontend/pulls) 60 | that relates to your submission. You don't want to duplicate effort. 61 | 62 | * Make your changes in a new git fork: 63 | 64 | * Commit your changes using a descriptive commit message 65 | * Push your fork to GitHub: 66 | * In GitHub, create a pull request 67 | * If we suggest changes then: 68 | * Make the required updates. 69 | * Rebase your fork and force push to your GitHub repository (this will update your Pull Request): 70 | 71 | ```shell 72 | git rebase master -i 73 | git push -f 74 | ``` 75 | 76 | ## Coding Rules 77 | 78 | To ensure consistency throughout the source code, keep these rules in mind as you are working: 79 | 80 | - All features or bug fixes **must be tested** by one or more specs (unit-tests). 81 | - All public API methods **must be documented**. 82 | 83 | ## Commit Message Guidelines 84 | 85 | We have very precise rules over how our git commit messages can be formatted. This leads to **more 86 | readable messages** that are easy to follow when looking through the **project history**. But also, 87 | we use the git commit messages to **generate the Contoso Real Estate project change log**. 88 | 89 | ### Commit Message Format 90 | 91 | We have very precise rules over how our Git commit messages must be formatted. 92 | This format leads to **easier to read commit history**. 93 | 94 | Each commit message consists of a **header**, a **body**, and a **footer**. 95 | 96 | ``` 97 |
98 | 99 | 100 | 101 |