diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 15c7f60..05d13a1 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,10 +1,11 @@ -> 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. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index ab05e29..e157237 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,18 +1,24 @@ ## Purpose + -* ... + +- ... ## Does this introduce a breaking change? + + ``` [ ] Yes [ ] No ``` ## Pull Request Type + What kind of change does this Pull Request introduce? + ``` [ ] 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 + ``` + ``` ## What to Check + Verify that the following are valid -* ... + +- ... ## Other Information - \ No newline at end of file + + diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a9115cf..884465a 100644 --- a/CONTRIBUTING.md +++ b/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 [opencode@microsoft.com](mailto:opencode@microsoft.com) 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) ## Code of Conduct + Help us keep this project open and inclusive. Please read and follow our [Code of Conduct](https://opensource.microsoft.com/codeofconduct/). ## 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. ## 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). ## Submission Guidelines ### 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]. ### 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 diff --git a/README.md b/README.md index 5e7cbd1..a4fc011 100644 --- a/README.md +++ b/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. - diff --git a/package-lock.json b/package-lock.json index a13aca7..d0c5dc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "serverless-ai-langchainjs", "version": "1.0.0", "license": "MIT", + "workspaces": ["packages/*"], "devDependencies": { "lint-staged": "^15.2.2", "prettier": "^3.0.3", diff --git a/package.json b/package.json index 4f70b91..20b3a3e 100644 --- a/package.json +++ b/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, diff --git a/packages/webapp/README.md b/packages/webapp/README.md new file mode 100644 index 0000000..2623ae8 --- /dev/null +++ b/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. diff --git a/packages/webapp/assets/lightbulb.svg b/packages/webapp/assets/lightbulb.svg new file mode 100644 index 0000000..e5954c4 --- /dev/null +++ b/packages/webapp/assets/lightbulb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/webapp/assets/new-chat.svg b/packages/webapp/assets/new-chat.svg new file mode 100644 index 0000000..7f47869 --- /dev/null +++ b/packages/webapp/assets/new-chat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/webapp/assets/question.svg b/packages/webapp/assets/question.svg new file mode 100644 index 0000000..229b59d --- /dev/null +++ b/packages/webapp/assets/question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/webapp/assets/send.svg b/packages/webapp/assets/send.svg new file mode 100644 index 0000000..fab2fc8 --- /dev/null +++ b/packages/webapp/assets/send.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/webapp/index.html b/packages/webapp/index.html new file mode 100644 index 0000000..612eae5 --- /dev/null +++ b/packages/webapp/index.html @@ -0,0 +1,46 @@ + + + + + + + + ChatGPT with Enterprise Data + + + + + + + + diff --git a/packages/webapp/package.json b/packages/webapp/package.json new file mode 100644 index 0000000..6c3211c --- /dev/null +++ b/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"] +} diff --git a/packages/webapp/public/favicon.ico b/packages/webapp/public/favicon.ico new file mode 100644 index 0000000..f1fe505 Binary files /dev/null and b/packages/webapp/public/favicon.ico differ diff --git a/packages/webapp/src/api.ts b/packages/webapp/src/api.ts new file mode 100644 index 0000000..4c8fb2e --- /dev/null +++ b/packages/webapp/src/api.ts @@ -0,0 +1,75 @@ +import { type ChatResponse, type ChatRequestOptions, type ChatResponseChunk } from './models.js'; + +export const apiBaseUrl = import.meta.env.VITE_BACKEND_API_URI || ''; + +export async function getCompletion(options: ChatRequestOptions) { + const apiUrl = options.apiUrl || apiBaseUrl; + const response = await fetch(`${apiUrl}/chat`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + messages: options.messages, + stream: options.stream, + context: { + top: options.top, + temperature: options.temperature, + }, + }), + }); + + if (options.stream) { + return getChunksFromResponse(response, options.chunkIntervalMs); + } + + const json: ChatResponse = await response.json(); + if (response.status > 299 || !response.ok) { + throw new Error(json.error ?? 'Unknown error'); + } + + return json; +} + +export function getCitationUrl(citation: string): string { + return `${apiBaseUrl}/content/${citation}`; +} + +export class NdJsonParserStream extends TransformStream { + private buffer = ''; + constructor() { + let controller: TransformStreamDefaultController; + super({ + start(_controller) { + controller = _controller; + }, + transform: (chunk) => { + const jsonChunks = chunk.split('\n').filter(Boolean); + for (const jsonChunk of jsonChunks) { + try { + this.buffer += jsonChunk; + controller.enqueue(JSON.parse(this.buffer)); + this.buffer = ''; + } catch { + // Invalid JSON, wait for next chunk + } + } + }, + }); + } +} + +export async function* getChunksFromResponse(response: Response, intervalMs: number): AsyncGenerator { + const reader = response.body?.pipeThrough(new TextDecoderStream()).pipeThrough(new NdJsonParserStream()).getReader(); + if (!reader) { + throw new Error('No response body or body is not readable'); + } + + let value: JSON | undefined; + let done: boolean; + while ((({ value, done } = await reader.read()), !done)) { + yield new Promise((resolve) => { + setTimeout(() => { + resolve(value as T); + }, intervalMs); + }); + } +} diff --git a/packages/webapp/src/components/chat.ts b/packages/webapp/src/components/chat.ts new file mode 100644 index 0000000..2f8e914 --- /dev/null +++ b/packages/webapp/src/components/chat.ts @@ -0,0 +1,804 @@ +/* eslint-disable unicorn/template-indent */ +import { LitElement, css, html, nothing } from 'lit'; +import { map } from 'lit/directives/map.js'; +import { repeat } from 'lit/directives/repeat.js'; +import { unsafeSVG } from 'lit/directives/unsafe-svg.js'; +import { customElement, property, state, query } from 'lit/decorators.js'; +import { + type ChatRequestOptions, + type ChatResponse, + type ChatMessage, + type ChatResponseChunk, + type ChatDebugDetails, + type ChatMessageContext, +} from '../models.js'; +import { getCitationUrl, getCompletion } from '../api.js'; +import { type ParsedMessage, parseMessageIntoHtml } from '../message-parser.js'; +import sendSvg from '../../assets/send.svg?raw'; +import questionSvg from '../../assets/question.svg?raw'; +import lightbulbSvg from '../../assets/lightbulb.svg?raw'; +import newChatSvg from '../../assets/new-chat.svg?raw'; +import './debug.js'; + +export type ChatComponentState = { + hasError: boolean; + isLoading: boolean; + isStreaming: boolean; +}; + +export type ChatComponentOptions = ChatRequestOptions & { + enablePromptSuggestions: boolean; + enableContentLinks: boolean; + promptSuggestions: string[]; + apiUrl?: string; + strings: { + promptSuggestionsTitle: string; + citationsTitle: string; + followUpQuestionsTitle: string; + showThoughtProcessTitle: string; + closeTitle: string; + thoughtsTitle: string; + supportingContentTitle: string; + chatInputPlaceholder: string; + chatInputButtonLabel: string; + assistant: string; + user: string; + errorMessage: string; + newChatButton: string; + retryButton: string; + }; +}; + +export const defaultOptions: ChatComponentOptions = { + enableContentLinks: false, + stream: false, + chunkIntervalMs: 30, + apiUrl: '', + enablePromptSuggestions: true, + promptSuggestions: [ + 'How to search and book rentals?', + 'What is the refund policy?', + 'How to contact a representative?', + ], + messages: [], + strings: { + promptSuggestionsTitle: 'Ask anything or try an example', + citationsTitle: 'Citations:', + followUpQuestionsTitle: 'Follow-up questions:', + showThoughtProcessTitle: 'Show thought process', + closeTitle: 'Close', + thoughtsTitle: 'Thought process', + supportingContentTitle: 'Supporting Content', + chatInputPlaceholder: 'Ask me anything...', + chatInputButtonLabel: 'Send question', + assistant: 'Support Assistant', + user: 'You', + errorMessage: 'We are currently experiencing an issue.', + newChatButton: 'New chat', + retryButton: 'Retry', + }, +}; + +/** + * A chat component that allows the user to ask questions and get answers from an API. + * The component also displays default prompts that the user can click on to ask a question. + * The component is built as a custom element that extends LitElement. + * + * Labels and other aspects are configurable via the `option` property. + * @element azc-chat + * @fires messagesUpdated - Fired when the message thread is updated + * @fires stateChanged - Fired when the state of the component changes + * */ +@customElement('azc-chat') +export class ChatComponent extends LitElement { + @property({ + type: Object, + converter: (value) => ({ ...defaultOptions, ...JSON.parse(value || '{}') }), + }) + options: ChatComponentOptions = defaultOptions; + + @property() question = ''; + @property({ type: Array }) messages: ChatMessage[] = []; + @state() protected hasError = false; + @state() protected isLoading = false; + @state() protected isStreaming = false; + @state() protected debugDetails?: ChatDebugDetails; + @query('.messages') protected messagesElement; + @query('.chat-input') protected chatInputElement; + + onSuggestionClicked(suggestion: string) { + this.question = suggestion; + this.onSendClicked(); + } + + onCitationClicked(citation: string) { + if (this.options.enableContentLinks) { + const path = getCitationUrl(citation); + window.open(path, '_blank'); + } else { + // TODO: open debug details + } + } + + onKeyPressed(event: KeyboardEvent) { + if (event.key === 'Enter') { + event.preventDefault(); + this.onSendClicked(); + } + } + + onShowDebugClicked(context: ChatMessageContext = {}) { + this.debugDetails = { + thoughts: context.thoughts ?? '', + dataPoints: context.data_points ?? [], + }; + } + + async onSendClicked(isRetry = false) { + if (this.isLoading) { + return; + } + + this.hasError = false; + if (!isRetry) { + this.messages = [ + ...this.messages, + { + content: this.question, + role: 'user', + }, + ]; + } + + this.question = ''; + this.isLoading = true; + this.scrollToLastMessage(); + try { + const response = await getCompletion({ ...this.options, messages: this.messages }); + if (this.options.stream) { + this.isStreaming = true; + const chunks = response as AsyncGenerator; + const { messages } = this; + const message: ChatMessage = { + content: '', + role: 'assistant', + context: { + data_points: [], + thoughts: '', + }, + }; + for await (const chunk of chunks) { + if (chunk.choices[0].delta.context?.data_points) { + message.context!.data_points = chunk.choices[0].delta.context?.data_points; + message.context!.thoughts = chunk.choices[0].delta.context?.thoughts ?? ''; + } else if (chunk.choices[0].delta.content) { + message.content += chunk.choices[0].delta.content; + this.messages = [...messages, message]; + this.scrollToLastMessage(); + } + } + } else { + const chatResponse = response as ChatResponse; + this.messages = [...this.messages, chatResponse.choices[0].message]; + this.scrollToLastMessage(); + } + + this.isLoading = false; + this.isStreaming = false; + } catch (error) { + this.hasError = true; + this.isLoading = false; + this.isStreaming = false; + console.error(error); + } + } + + override requestUpdate(name?: string, oldValue?: any) { + if (name === 'messages') { + const messagesUpdatedEvent = new CustomEvent('messagesUpdated', { + detail: { messages: this.messages }, + bubbles: true, + }); + this.dispatchEvent(messagesUpdatedEvent); + } else if (name === 'hasError' || name === 'isLoading' || name === 'isStreaming') { + const state = { + hasError: this.hasError, + isLoading: this.isLoading, + isStreaming: this.isStreaming, + }; + const stateUpdatedEvent = new CustomEvent('stateChanged', { + detail: { state }, + bubbles: true, + }); + this.dispatchEvent(stateUpdatedEvent); + } + + return super.requestUpdate(name, oldValue); + } + + protected scrollToLastMessage() { + // Need to be delayed to run after the DOM refresh + setTimeout(() => { + const { bottom } = this.messagesElement.getBoundingClientRect(); + const { top } = this.chatInputElement.getBoundingClientRect(); + if (bottom > top) { + window.scrollBy(0, bottom - top); + } + }, 0); + } + + protected renderSuggestions = (suggestions: string[]) => html` +
+

${this.options.strings.promptSuggestionsTitle}

+
+ ${map( + suggestions, + (suggestion) => html` + + `, + )} +
+
+ `; + + protected renderLoader = () => + this.isLoading && !this.isStreaming + ? html` +
+
+
+
${this.options.strings.assistant}
+
+
+ ` + : nothing; + + protected renderMessage = (message: ParsedMessage) => html` +
+ ${message.role === 'assistant' + ? html` +
+ +
+ ` + : nothing} +
+
${message.html}
+ ${message.citations.length > 0 + ? html` +
+
${this.options.strings.citationsTitle}
+ ${map(message.citations, this.renderCitation)} +
+ ` + : nothing} +
+
+ ${message.role === 'user' ? this.options.strings.user : this.options.strings.assistant} +
+
+ `; + + protected renderError = () => html` +
+
+ ${this.options.strings.errorMessage} + +
+
+ `; + + protected renderCitation = (citation: string, index: number) => + html``; + + protected renderCitationLink = (citation: string, index: number) => + html``; + + protected renderFollowupQuestions = (questions: string[]) => + questions.length > 0 + ? html` +
+ + ${unsafeSVG(questionSvg)} ${map( + questions, + (question) => html` + + `, + )} +
+ ` + : nothing; + + protected renderChatInput = () => html` +
+ +
+ + +
+
+ `; + + protected override render() { + const parsedMessages = this.messages.map((message) => parseMessageIntoHtml(message, this.renderCitationLink)); + return html` +
+ ${this.options.enablePromptSuggestions && + this.options.promptSuggestions.length > 0 && + this.messages.length === 0 + ? this.renderSuggestions(this.options.promptSuggestions) + : nothing} +
+ ${repeat(parsedMessages, (_, index) => index, this.renderMessage)} ${this.renderLoader()} + ${this.hasError ? this.renderError() : nothing} + ${this.renderFollowupQuestions(parsedMessages.at(-1)?.followupQuestions ?? [])} +
+ ${this.renderChatInput()} +
+ ${this.debugDetails + ? html`
+ + + +
` + : nothing} + `; + } + + static override styles = css` + :host { + /* Base properties */ + --primary: var(--azc-primary, #07f); + --error: var(--azc-error, #e30); + --text-color: var(--azc-text-color, #000); + --text-invert-color: var(--azc--text-invert-color, #fff); + --disabled-color: var(--azc-disabled-color, #ccc); + --bg: var(--azc-bg, #eee); + --card-bg: var(--azc-card-bg, #fff); + --card-shadow: var(--azc-card-shadow, 0 0.3px 0.9px rgba(0 0 0 / 12%), 0 1.6px 3.6px rgba(0 0 0 / 16%)); + --space-md: var(--azc-space-md, 12px); + --space-xl: var(--azc-space-xl, calc(var(--space-md) * 2)); + --space-xs: var(--azc-space-xs, calc(var(--space-md) / 2)); + --space-xxs: var(--azc-space-xs, calc(var(--space-md) / 4)); + --border-radius: var(--azc-border-radius, 16px); + --focus-outline: var(--azc-focus-outline, 2px solid); + --overlay-color: var(--azc-overlay-color, rgba(0 0 0 / 40%)); + + /* Component-specific properties */ + --error-color: var(--azc-error-color, var(--error)); + --error-border: var(--azc-error-border, none); + --error-bg: var(--azc-error-bg, var(--card-bg)); + --retry-button-color: var(--azc-retry-button-color, var(--text-color)); + --retry-button-bg: var(--azc-retry-button-bg, #f0f0f0); + --retry-button-bg-hover: var(--azc-retry-button-bg, #e5e5e5); + --retry-button-border: var(--azc-retry-button-border, none); + --suggestion-color: var(--azc-suggestion-color, var(--text-color)); + --suggestion-border: var(--azc-suggestion-border, none); + --suggestion-bg: var(--azc-suggestion-bg, var(--card-bg)); + --suggestion-shadow: var(--azc-suggestion-shadow, 0 6px 16px -1.5px rgba(141 141 141 / 30%)); + --user-message-color: var(--azc-user-message-color, var(--text-invert-color)); + --user-message-border: var(--azc-user-message-border, none); + --user-message-bg: var(--azc-user-message-bg, var(--primary)); + --bot-message-color: var(--azc-bot-message-color, var(--text-color)); + --bot-message-border: var(--azc-bot-message-border, none); + --citation-color: var(--azc-citation-color, var(--text-invert-color)); + --bot-message-bg: var(--azc-bot-message-bg, var(--card-bg)); + --citation-bg: var(--azc-citation-bg, var(--primary)); + --citation-bg-hover: var(--azc-citation-bg, color-mix(in srgb, var(--primary), #000 10%)); + --new-chat-button-color: var(--azc-button-color, var(--text-invert-color)); + --new-chat-button-bg: var(--azc-new-chat-button-bg, var(--primary)); + --new-chat-button-bg-hover: var(--azc-new-chat-button-bg, color-mix(in srgb, var(--primary), #000 10%)); + --chat-input-color: var(--azc-chat-input-color, var(--text-color)); + --chat-input-border: var(--azc-chat-input-border, none); + --chat-input-bg: var(--azc-chat-input-bg, var(--card-bg)); + --submit-button-color: var(--azc-button-color, var(--primary)); + --submit-button-border: var(--azc-submit-button-border, none); + --submit-button-bg: var(--azc-submit-button-bg, none); + --submit-button-bg-hover: var(--azc-submit-button-color, #f0f0f0); + } + *:focus-visible { + outline: var(--focus-outline) var(--primary); + } + .animation { + animation: 0.3s ease; + } + svg { + fill: currentColor; + } + button { + font-size: 1rem; + border-radius: calc(var(--border-radius) / 2); + outline: var(--focus-outline) transparent; + transition: outline 0.3s ease; + + &:not(:disabled) { + cursor: pointer; + } + } + .chat-container { + container-type: inline-size; + position: relative; + background: var(--bg); + font-family: + 'Segoe UI', + -apple-system, + BlinkMacSystemFont, + Roboto, + 'Helvetica Neue', + sans-serif; + } + .citation-link { + padding: 0; + color: var(--primary); + background: none; + border: none; + white-space: normal; + } + .citation { + font-size: 0.85rem; + color: var(--citation-color); + background: var(--citation-bg); + border: var(--citation-border); + padding: var(--space-xxs) var(--space-xs); + margin-right: var(--space-xs); + margin-top: var(--space-xs); + + &:hover { + background: var(--citation-bg-hover); + } + } + .citations-title { + font-weight: bold; + } + .suggestions-container { + text-align: center; + padding: var(--space-xl); + } + .suggestions { + display: flex; + gap: var(--space-md); + } + @container (width < 480px) { + .suggestions { + flex-direction: column; + } + } + + .suggestion { + flex: 1 1 0; + padding: var(--space-xl) var(--space-md); + color: var(--sugestion-color); + background: var(--suggestion-bg); + border: var(--suggestion-border); + border-radius: var(--border-radius); + box-shadow: var(--suggestion-shadow); + + &:hover { + outline: var(--focus-outline) var(--primary); + } + } + .messages { + padding: var(--space-xl); + display: flex; + flex-direction: column; + gap: var(--space-md); + } + .user { + align-self: end; + color: var(--user-message-color); + background: var(--user-message-bg); + border: var(--user-message-border); + } + .assistant { + color: var(--bot-message-color); + background: var(--bot-message-bg); + border: var(--bot-message-border); + box-shadow: var(--card-shadow); + } + .message { + position: relative; + width: auto; + max-width: 70%; + border-radius: var(--border-radius); + padding: var(--space-xl); + margin-bottom: var(--space-xl); + &.user { + animation-name: fade-in-up; + } + } + .message-body { + display: flex; + flex-direction: column; + gap: var(--space-md); + } + .content { + white-space: pre-line; + } + .message-role { + position: absolute; + right: var(--space-xl); + bottom: -1.25em; + color: var(--text-color); + font-size: 0.85rem; + opacity: 0.6; + } + .questions { + margin: var(--space-md) 0; + color: var(--primary); + text-align: right; + } + .question-icon { + vertical-align: middle; + display: inline-block; + height: 1.7rem; + width: 1.7rem; + margin-bottom: var(--space-xs); + margin-left: var(--space-xs); + } + .question { + position: relative; + padding: var(--space-xs) var(--space-md); + margin-bottom: var(--space-xs); + margin-left: var(--space-xs); + vertical-align: middle; + color: var(--primary); + background: var(--card-bg); + border: 1px solid var(--primary); + animation-name: fade-in-right; + &:hover { + background: color-mix(in srgb, var(--card-bg), var(--primary) 5%); + } + } + .debug-buttons { + display: flex; + justify-content: right; + gap: var(--space-md); + margin-bottom: var(--space-md); + } + .debug-details { + position: fixed; + inset: 0; + background: var(--overlay-color); + } + .button, + .submit-button { + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-xs); + border: var(--button-border); + background: var(--submit-button-bg); + color: var(--submit-button-color); + &:disabled { + color: var(--disabled-color); + } + &:hover:not(:disabled) { + background: var(--submit-button-bg-hover); + } + } + .submit-button { + padding: 0; + width: 48px; + } + .close-button { + position: absolute; + top: var(--space-md); + right: var(--space-md); + width: auto; + padding: var(--space-md); + &:hover:not(:disabled) { + background: var(--card-bg); + } + } + .error { + color: var(--error-color); + background: var(--error-bg); + outline: var(--focus-outline) var(--error); + + & .message-body { + flex-direction: row; + align-items: center; + } + + & button { + flex: 0; + padding: var(--space-md); + color: var(--retry-button-color); + background: var(--retry-button-bg); + border: var(--retry-button-border); + + &:hover { + background: var(--retry-button-bg-hover); + } + } + } + .error-message { + flex: 1; + } + .chat-input { + --half-space-xl: calc(var(--space-xl) / 2); + position: sticky; + bottom: 0; + padding: var(--space-xl); + padding-top: var(--half-space-xl); + background: var(--bg); + box-shadow: 0 calc(-1 * var(--half-space-xl)) var(--half-space-xl) var(--bg); + display: flex; + gap: var(--space-md); + } + .new-chat-button { + width: 48px; + height: 48px; + padding: var(--space-md); + border-radius: 50%; + background: var(--new-chat-button-bg); + color: var(--new-chat-button-color); + font-size: 1.5rem; + &:hover:not(:disabled) { + background: var(--new-chat-button-bg-hover); + color: var(--new-chat-button-color); + } + } + .input-form { + display: flex; + flex: 1 auto; + background: var(--chat-input-bg); + border: var(--chat-input-border); + border-radius: var(--border-radius); + padding: var(--space-md); + box-shadow: var(--card-shadow); + outline: var(--focus-outline) transparent; + transition: outline 0.3s ease; + + &:has(.text-input:focus-visible) { + outline: var(--focus-outline) var(--primary); + } + } + .text-input { + padding: var(--space-xs); + font-family: inherit; + font-size: 1rem; + flex: 1 auto; + height: 3rem; + border: none; + resize: none; + background: none; + &::placeholder { + color: var(--text-color); + opacity: 0.4; + } + &:focus { + outline: none; + } + &:disabled { + opacity: 0.7; + } + } + .loader-animation { + width: 100px; + height: 4px; + border-radius: var(--border-radius); + overflow: hidden; + background-color: var(--primary); + transform: scaleX(0); + transform-origin: center left; + animation: cubic-bezier(0.85, 0, 0.15, 1) 2s infinite load-animation; + } + + @keyframes load-animation { + 0% { + transform: scaleX(0); + transform-origin: center left; + } + 50% { + transform: scaleX(1); + transform-origin: center left; + } + 51% { + transform: scaleX(1); + transform-origin: center right; + } + 100% { + transform: scaleX(0); + transform-origin: center right; + } + } + @keyframes fade-in-up { + 0% { + opacity: 0.5; + top: 100px; + } + 100% { + opacity: 1; + top: 0px; + } + } + @keyframes fade-in-right { + 0% { + opacity: 0.5; + right: -100px; + } + 100% { + opacity: 1; + right: 0; + } + } + @media (prefers-reduced-motion: reduce) { + .animation { + animation: none; + } + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + 'azc-chat': ChatComponent; + } +} diff --git a/packages/webapp/src/components/debug.ts b/packages/webapp/src/components/debug.ts new file mode 100644 index 0000000..02efbdf --- /dev/null +++ b/packages/webapp/src/components/debug.ts @@ -0,0 +1,123 @@ +/* eslint-disable unicorn/template-indent */ +import { LitElement, css, html } from 'lit'; +import { map } from 'lit/directives/map.js'; +import { customElement, property } from 'lit/decorators.js'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { type ChatDebugDetails } from '../models.js'; + +export type DebugComponentOptions = { + strings: { + thoughtsTitle: string; + supportingContentTitle: string; + }; +}; + +@customElement('azc-debug') +export class DebugComponent extends LitElement { + @property({ type: Object }) details: ChatDebugDetails = { thoughts: '', dataPoints: [] }; + @property({ type: Object }) options!: DebugComponentOptions; + @property({ type: Boolean }) showThoughtProcess = true; + + protected renderThoughtProcess = (thoughtProcess: string) => html`${unsafeHTML(thoughtProcess)}`; + + protected renderDataPoints = (dataPoints: string[]) => { + const infos = dataPoints.map((dataPoint) => { + const [title, ...extract] = dataPoint.split(':'); + return { title, extract: extract.join(':') }; + }); + return html`
+ ${map( + infos, + (info) => + html`
+
${info.title}
+
${info.extract}
+
`, + )} +
`; + }; + + protected override render() { + return html``; + } + + static override styles = css` + *:focus-visible { + outline: var(--focus-outline) var(--primary); + } + button { + padding: var(--space-md); + font-size: 1rem; + outline: var(--focus-outline) transparent; + transition: outline 0.3s ease; + border: none; + + &:not(:disabled) { + cursor: pointer; + } + &:hover:not(:disabled) { + // TODO: separate out hover style + background: var(--submit-button-bg-hover); + } + } + .active { + border-bottom: 3px solid var(--primary); + } + .nav { + padding-bottom: var(--space-md); + } + .debug-container { + position: absolute; + inset: var(--space-xl); + display: flex; + flex-direction: column; + border-radius: var(--border-radius); + background: var(--bg); + overflow: hidden; + padding: var(--space-xl); + margin: 0px auto; + max-width: 1024px; + } + .content { + flex: 1; + display: flex; + flex-direction: column; + overflow: auto; + } + .title { + font-weight: bold; + margin-bottom: var(--space-md); + } + .card { + padding: var(--space-md); + margin-bottom: var(--space-md); + border-radius: var(--border-radius); + // TODO: separate out card styles + color: var(--bot-message-color); + background: var(--bot-message-bg); + border: var(--bot-message-border); + box-shadow: var(--card-shadow); + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + 'azc-debug': DebugComponent; + } +} diff --git a/packages/webapp/src/index.ts b/packages/webapp/src/index.ts new file mode 100644 index 0000000..2947db0 --- /dev/null +++ b/packages/webapp/src/index.ts @@ -0,0 +1,5 @@ +export * from './api.js'; +export * from './components/chat.js'; +export * from './components/debug.js'; +export * from './message-parser.js'; +export * from './models.js'; diff --git a/packages/webapp/src/message-parser.ts b/packages/webapp/src/message-parser.ts new file mode 100644 index 0000000..af19399 --- /dev/null +++ b/packages/webapp/src/message-parser.ts @@ -0,0 +1,68 @@ +import { type HTMLTemplateResult, html, nothing } from 'lit'; +import { type ChatMessage, type ChatMessageContext } from './models.js'; + +export type ParsedMessage = { + html: HTMLTemplateResult; + citations: string[]; + followupQuestions: string[]; + role: string; + context?: ChatMessageContext; +}; + +export function parseMessageIntoHtml( + message: ChatMessage, + renderCitationReference: (citation: string, index: number) => HTMLTemplateResult, +): ParsedMessage { + if (message.role === 'user') { + return { + html: html`${message.content}`, + citations: [], + followupQuestions: [], + role: message.role, + context: message.context, + }; + } + + const citations: string[] = []; + const followupQuestions: string[] = []; + + // Extract any follow-up questions that might be in the message + const text = message.content + .replaceAll(/<<([^>]+)>>/g, (_match, content) => { + followupQuestions.push(content); + return ''; + }) + .split('<<')[0] // Truncate incomplete questions + .trim(); + + // Extract any citations that might be in the message + const parts = text.split(/\[([^\]]+)]/g); + const result = html`${parts.map((part, index) => { + if (index % 2 === 0) { + return html`${part}`; + } + + if (index + 1 < parts.length) { + // Handle only completed citations + let citationIndex = citations.indexOf(part); + if (citationIndex === -1) { + citations.push(part); + citationIndex = citations.length; + } else { + citationIndex++; + } + + return renderCitationReference(part, citationIndex); + } + + return nothing; + })}`; + + return { + html: result, + citations, + followupQuestions, + role: message.role, + context: message.context, + }; +} diff --git a/packages/webapp/src/models.ts b/packages/webapp/src/models.ts new file mode 100644 index 0000000..cdf69f5 --- /dev/null +++ b/packages/webapp/src/models.ts @@ -0,0 +1,46 @@ +export type Message = { + content: string; + role: string; +}; + +export type ChatDebugDetails = { + thoughts: string; + dataPoints: string[]; +}; + +export type ChatMessageContext = Record & { + thoughts?: string; + data_points?: string[]; +}; + +export type ChatMessage = Message & { + context?: ChatMessageContext; +}; + +export type ChatResponse = { + choices: Array<{ + index: number; + message: ChatMessage; + }>; + error?: string; +}; + +export type ChatResponseChunk = { + choices: Array<{ + index: number; + delta: Partial; + }>; + error?: string; +}; + +export type ChatRequestOptions = { + messages: Message[]; + stream: boolean; + chunkIntervalMs: number; + apiUrl: string; +} & ChatRequestOverrides; + +export type ChatRequestOverrides = { + top?: number; + temperature?: number; +}; diff --git a/packages/webapp/src/vite-env.d.ts b/packages/webapp/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/packages/webapp/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/webapp/tsconfig.json b/packages/webapp/tsconfig.json new file mode 100644 index 0000000..a7a2772 --- /dev/null +++ b/packages/webapp/tsconfig.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "lib": ["esnext", "DOM", "DOM.Iterable"], + "strict": true, + "outDir": "./dist", + "rootDir": "./src", + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "inlineSources": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "noImplicitAny": false, + "noImplicitThis": true, + "moduleResolution": "node", + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "forceConsistentCasingInFileNames": true, + "noImplicitOverride": true, + "emitDeclarationOnly": true, + "useDefineForClassFields": false, + "plugins": [ + { + "name": "ts-lit-plugin", + "strict": true + } + ] + }, + "include": ["src/**/*.ts"] +} diff --git a/packages/webapp/vite.config.ts b/packages/webapp/vite.config.ts new file mode 100644 index 0000000..de92b5e --- /dev/null +++ b/packages/webapp/vite.config.ts @@ -0,0 +1,28 @@ +import process from 'node:process'; +import { defineConfig } from 'vite'; + +// Expose environment variables to the client +process.env.VITE_BACKEND_API_URI = process.env.BACKEND_API_URI ?? ''; +console.log(`Using chat API base URL: "${process.env.VITE_BACKEND_API_URI}"`); + +export default defineConfig({ + build: { + outDir: './dist', + emptyOutDir: true, + sourcemap: true, + rollupOptions: { + output: { + manualChunks(id) { + if (id.includes('node_modules')) { + return 'vendor'; + } + }, + }, + }, + }, + server: { + proxy: { + '/chat': 'http://127.0.0.1:3000', + }, + }, +});