Add website preview functionality using marked for markdown rendering

Author: robertpiosik

apps/editor/package.json

@@ -1986,6 +1986,7 @@
     "he": "^1.2.0",
     "ignore": "^6.0.2",
     "jsdom": "^24.0.0",
+    "marked": "^17.0.1",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/editor/src/views/panel/backend/message-handlers/handle-open-website.ts

@@ -0,0 +1,49 @@
+import * as vscode from 'vscode'
+import { OpenWebsiteMessage } from '../../types/messages'
+import * as fs from 'fs'
+import { get_website_file_path } from '../utils/website-fetcher'
+import { marked } from 'marked'
+
+export const handle_open_website = async (message: OpenWebsiteMessage) => {
+  const file_path = get_website_file_path(message.url)
+
+  if (fs.existsSync(file_path)) {
+    const markdown = fs.readFileSync(file_path, 'utf8')
+    const html = await marked.parse(markdown)
+
+    const panel = vscode.window.createWebviewPanel(
+      'websitePreview',
+      'Website Preview',
+      vscode.ViewColumn.One
+    )
+
+    panel.webview.html = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Website Preview</title>
+        <style>
+          body {
+            line-height: 1.5;
+            padding: 20px 40px;
+          }
+          hr {
+            height: 1px;
+            border: none;
+            background-color: var(--vscode-editorWidget-border);
+          }
+        </style>
+      </head>
+      <body>
+        <a href="${message.url}">${message.url}</a>
+        <hr>
+        ${html}
+      </body>
+      </html>
+    `
+  } else {
+    vscode.env.openExternal(vscode.Uri.parse(message.url))
+  }
+}

apps/editor/src/views/panel/backend/message-handlers/index.ts

@@ -67,3 +67,4 @@ export * from './handle-save-prompt-document'
 export * from './handle-open-prompt-document'
 export * from './handle-paste-url'
 export * from './handle-voice-input'
+export * from './handle-open-website'

apps/editor/src/views/panel/backend/panel-provider.ts

@@ -73,7 +73,6 @@ import {
   handle_delete_task,
   handle_fix_all_failed_files,
   handle_prune_context,
-  handle_cancel_intelligent_update_file_in_preview,
   handle_get_prune_context_instructions_prefix,
   handle_save_prune_context_instructions_prefix,
   handle_open_external_url,
@@ -84,7 +83,9 @@ import {
   handle_save_prompt_document,
   handle_open_prompt_document,
   handle_paste_url,
-  handle_voice_input
+  handle_voice_input,
+  handle_open_website,
+  handle_cancel_intelligent_update_file_in_preview
 } from './message-handlers'
 import { SelectionState } from '../types/messages'
 import {
@@ -845,6 +846,8 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             await handle_open_prompt_document(message)
           } else if (message.command == 'PASTE_URL') {
             await handle_paste_url(this, message)
+          } else if (message.command == 'OPEN_WEBSITE') {
+            await handle_open_website(message)
           } else if (message.command == 'SET_RECORDING_STATE') {
             await handle_voice_input(this, message)
           } else if (message.command == 'GET_SETUP_PROGRESS') {

apps/editor/src/views/panel/backend/utils/website-fetcher.ts

@@ -85,6 +85,10 @@ const create_turndown_service = () => {
     filter: ['figure', 'picture', 'sup'],
     replacement: () => ''
   })
+  turndown_service.addRule('removeLinks', {
+    filter: 'a',
+    replacement: (content) => content
+  })
   return turndown_service
 }
 

apps/editor/src/views/panel/frontend/Main/Main.tsx

@@ -64,6 +64,7 @@ type Props = {
   prune_context_instructions_prefix: string
   on_prune_context_instructions_prefix_change: (prefix: string) => void
   on_open_url: (url: string) => void
+  on_open_website: (url: string) => void
   on_paste_image: (base64_content: string) => void
   on_open_image: (hash: string) => void
   on_paste_document: (text: string) => void
@@ -848,6 +849,7 @@ export const Main: React.FC<Props> = (props) => {
         props.on_prune_context_instructions_prefix_change
       }
       on_open_url={props.on_open_url}
+      on_open_website={props.on_open_website}
       on_paste_image={props.on_paste_image}
       on_open_image={props.on_open_image}
       on_paste_document={props.on_paste_document}

apps/editor/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -102,6 +102,7 @@ type Props = {
   on_go_to_file: (file_path: string) => void
   on_pasted_lines_click: (path: string, start?: string, end?: string) => void
   on_open_url: (url: string) => void
+  on_open_website: (url: string) => void
   are_keyboard_shortcuts_disabled: boolean
   prune_context_instructions_prefix: string
   on_prune_context_instructions_prefix_change: (prefix: string) => void
@@ -268,6 +269,7 @@ export const MainView: React.FC<Props> = (props) => {
             on_go_to_file={props.on_go_to_file}
             on_pasted_lines_click={props.on_pasted_lines_click}
             on_open_url={props.on_open_url}
+            on_open_website={props.on_open_website}
             invocation_count={current_invocation_count}
             on_invocation_count_change={handle_invocation_count_change}
             prune_context_instructions_prefix={

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -222,6 +222,13 @@ export const Panel = () => {
     })
   }
 
+  const handle_open_website = (url: string) => {
+    post_message(vscode, {
+      command: 'OPEN_WEBSITE',
+      url
+    })
+  }
+
   const layout_context_value = {
     can_undo,
     on_apply_click: handle_apply_click,
@@ -312,6 +319,7 @@ export const Panel = () => {
                   handle_prune_context_instructions_prefix_change
                 }
                 on_open_url={handle_open_url}
+                on_open_website={handle_open_website}
                 on_paste_image={handle_paste_image}
                 on_open_image={handle_open_image}
                 on_paste_document={handle_paste_long_document}

apps/editor/src/views/panel/types/messages.ts

@@ -478,6 +478,11 @@ export interface OpenExternalUrlMessage extends BaseMessage {
   url: string
 }
 
+export interface OpenWebsiteMessage extends BaseMessage {
+  command: 'OPEN_WEBSITE'
+  url: string
+}
+
 export interface UpsertConfigurationMessage extends BaseMessage {
   command: 'UPSERT_CONFIGURATION'
   tool_type: ToolType
@@ -619,6 +624,7 @@ export type FrontendMessage =
   | SavePromptDocumentMessage
   | OpenPromptDocumentMessage
   | PasteUrlMessage
+  | OpenWebsiteMessage
   | SetRecordingStateMessage
   | GetSetupProgressMessage
 

apps/editor/src/views/settings/backend/message-handlers/handle-edit-model-provider-key.ts

@@ -32,7 +32,7 @@ export const handle_change_model_provider_key = async (
     password: true,
     placeHolder: provider_to_update.api_key
       ? `...${provider_to_update.api_key.slice(-4)}`
-      : 'No API key set'
+      : ''
   })
 
   if (new_api_key === undefined) {