| 170 | } |
| 171 | |
| 172 | private getWebviewHtml(webview: vscode.Webview) { |
| 173 | const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'main.js')); |
| 174 | const stylesMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'main.css')); |
| 175 | |
| 176 | const vendorHighlightCss = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'vendor', 'highlight.min.css')); |
| 177 | const vendorHighlightJs = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'vendor', 'highlight.min.js')); |
| 178 | const vendorMarkedJs = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'vendor', 'marked.min.js')); |
| 179 | const vendorTailwindJs = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'vendor', 'tailwindcss.3.2.4.min.js')); |
| 180 | const vendorTurndownJs = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'media', 'vendor', 'turndown.js')); |
| 181 | |
| 182 | return `<!DOCTYPE html> |
| 183 | <html lang="en"> |
| 184 | <head> |
| 185 | <meta charset="UTF-8"> |
| 186 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 187 | |
| 188 | <link href="${stylesMainUri}" rel="stylesheet"> |
| 189 | <link href="${vendorHighlightCss}" rel="stylesheet"> |
| 190 | <script src="${vendorHighlightJs}"></script> |
| 191 | <script src="${vendorMarkedJs}"></script> |
| 192 | <script src="${vendorTailwindJs}"></script> |
| 193 | <script src="${vendorTurndownJs}"></script> |
| 194 | </head> |
| 195 | <body class="overflow-hidden"> |
| 196 | <div class="flex flex-col h-screen"> |
| 197 | <div id="introduction" class="flex h-full items-center justify-center px-6 w-full relative"> |
| 198 | <div class="flex items-start text-center gap-3.5"> |
| 199 | <div class="flex flex-col gap-3.5 flex-1"> |
| 200 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6 h-6 m-auto"> |
| 201 | <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path> |
| 202 | </svg> |
| 203 | <h2 class="text-lg font-normal">Features</h2> |
| 204 | <ul class="flex flex-col gap-3.5"> |
| 205 | <li class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md">Optimized for dialogue</li> |
| 206 | <li class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md">Improve your code, add tests & find bugs</li> |
| 207 | <li class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md">Copy or create new files automatically</li> |
| 208 | <li class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md">Syntax highlighting with auto language detection</li> |
| 209 | </ul> |
| 210 | </div> |
| 211 | <div class="flex flex-col gap-3.5 flex-1"> |
| 212 | <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 m-auto" height="1em" width="1em" |
| 213 | xmlns="http://www.w3.org/2000/svg"> |
| 214 | <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path> |
| 215 | <line x1="12" y1="9" x2="12" y2="13"></line> |
| 216 | <line x1="12" y1="17" x2="12.01" y2="17"></line> |
| 217 | </svg> |
| 218 | <h2 class="text-lg font-normal">Limitations</h2> |
| 219 | <ul class="flex flex-col gap-3.5"> |
| 220 | <li class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md">May occasionally take long time to respond/fail</li> |
| 221 | <li class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md">May throw HTTP 429, if you make too many requests</li> |
| 222 | <li class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md">If issues persist, clear your session and re-login</li> |
| 223 | </ul> |
| 224 | </div> |
| 225 | </div> |
| 226 | <p class="absolute bottom-0 max-w-sm text-center text-xs text-slate-500">Get your session token <a href="https://chat.openai.com">here</a>.<br /><a href="https://github.com/gencay/vscode-chatgpt">©️ Open source</a></p> |
| 227 | </div> |
| 228 | |
| 229 | <div class="flex-1 overflow-y-auto" id="qa-list"></div> |