feat(ui): llm conversation about error

package.json

@@ -98,6 +98,7 @@
     "formidable": "^2.1.1",
     "immutable": "^4.3.7",
     "license-checker": "^25.0.1",
+    "markdown-to-jsx": "^7.7.3",
     "mime": "^3.0.0",
     "node-stream-zip": "^1.15.0",
     "react": "^18.1.0",

packages/playwright-core/src/server/trace/viewer/traceViewer.ts

@@ -142,6 +142,16 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
   server.routePath('/', (_, response) => {
     response.statusCode = 302;
     response.setHeader('Location', urlPath);
+
+    if (process.env.OPENAI_API_KEY)
+      response.appendHeader('Set-Cookie', `openai_api_key=${process.env.OPENAI_API_KEY}`);
+    if (process.env.OPENAI_BASE_URL)
+      response.appendHeader('Set-Cookie', `openai_base_url=${process.env.OPENAI_BASE_URL}`);
+    if (process.env.ANTHROPIC_API_KEY)
+      response.appendHeader('Set-Cookie', `anthropic_api_key=${process.env.ANTHROPIC_API_KEY}`);
+    if (process.env.ANTHROPIC_BASE_URL)
+      response.appendHeader('Set-Cookie', `anthropic_base_url=${process.env.ANTHROPIC_BASE_URL}`);
+
     response.end();
     return true;
   });

packages/trace-viewer/src/sw/main.ts

@@ -78,6 +78,12 @@ async function doFetch(event: FetchEvent): Promise<Response> {
   if (event.request.url.startsWith('chrome-extension://'))
     return fetch(event.request);
 
+  if (event.request.headers.get('x-pw-serviceworker') === 'forward') {
+    const request = new Request(event.request);
+    request.headers.delete('x-pw-serviceworker');
+    return fetch(request);
+  }
+
   const request = event.request;
   const client = await self.clients.get(event.clientId);
 

packages/trace-viewer/src/ui/aiConversation.css

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: #e0e0e0;
+}
+
+.chat-disclaimer {
+  text-align: center;
+  color: var(--vscode-editorBracketMatch-border);
+  margin: 0px;
+}
+
+.chat-container hr {
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--vscode-titleBar-inactiveBackground);
+}
+
+.messages-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.message {
+  gap: 12px;
+  max-width: 85%;
+}
+
+.user-message {
+  flex-direction: row-reverse;
+  margin-left: auto;
+  width: fit-content
+}
+
+.message-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vscode-titleBar-inactiveBackground);
+  flex-shrink: 0;
+}
+
+.message-content {
+  background-color: var(--vscode-titleBar-inactiveBackground);
+  color: var(--vscode-titleBar-activeForeground);
+  padding: 2px 8px;
+}
+
+.message-content pre {
+  text-wrap: auto;
+  overflow-wrap: anywhere;
+}
+
+.user-message .message-content {
+  background-color: var(--vscode-titleBar-activeBackground);
+}
+
+/* Input form styles */
+.input-form {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  height: 64px;
+  gap: 8px;
+  padding: 10px;
+  background-color: var(--vscode-sideBar-background);
+  border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
+}
+
+.message-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--vscode-settings-textInputBorder);
+  background-color: var(--vscode-settings-textInputBackground);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.message-input:focus {
+  border-color: #0078d4;
+}
+
+.send-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  background-color: var(--vscode-button-background);
+  border: none;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.send-button:hover {
+  background-color: var(--vscode-button-hoverBackground);
+}
+
+.send-button:disabled {
+  background-color: var(--vscode-disabledForeground);
+  cursor: not-allowed;
+}

packages/trace-viewer/src/ui/aiConversation.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useCallback, useState } from 'react';
+import Markdown from 'markdown-to-jsx';
+import './aiConversation.css';
+import { clsx } from '@web/uiUtils';
+import { useLLMConversation } from './llm';
+
+export function AIConversation({ conversationId }: { conversationId: string }) {
+  const [history, conversation] = useLLMConversation(conversationId);
+  const [input, setInput] = useState('');
+
+  const onSubmit = useCallback(() => {
+    setInput(content => {
+      conversation.send(content);
+      return '';
+    });
+  }, [conversation]);
+
+  return (
+    <div className='chat-container'>
+      <p className='chat-disclaimer'>Chat based on {conversation.chat.api.name}. Check for mistakes.</p>
+      <hr/>
+      <div className='messages-container'>
+        {history.filter(({ role }) => role !== 'developer').map((message, index) => (
+          <div
+            key={'' + index}
+            className={clsx('message', message.role === 'user' && 'user-message')}
+          >
+            {message.role === 'assistant' && (
+              <div className='message-icon'>
+                <img src='playwright-logo.svg' />
+              </div>
+            )}
+            <div className='message-content'>
+              <Markdown>{message.displayContent ?? message.content}</Markdown>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className='input-form'>
+        <textarea
+          name='content'
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              onSubmit();
+            }
+          }}
+          placeholder='Ask a question...'
+          className='message-input'
+        />
+        {conversation.isSending() ? (
+          <button type='button' className='send-button' onClick={evt => {
+            evt.preventDefault();
+            conversation.abortSending();
+          }}>
+            Cancel
+          </button>
+        ) : (
+          <button className='send-button' disabled={!input.trim()} onClick={onSubmit}>
+            Send
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}