Skip to content

Commit a67128a

Browse files
mrubensmrubens
committed
Add router images
1 parent 6e5ad0c commit a67128a

File tree

5 files changed

+46
-18
lines changed

5 files changed

+46
-18
lines changed

‎.vscodeignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,9 @@ webview-ui/node_modules/**
4848
# Include default themes JSON files used in getTheme
4949
!src/integrations/theme/default-themes/**
5050

51-
# Include icons
51+
# Include icons and images
5252
!assets/icons/**
53+
!assets/images/**
5354

5455
# Include .env file for telemetry
5556
!.env

‎assets/images/openrouter.png‎

6.56 KB
Loading

‎assets/images/requesty.png‎

12.9 KB
Loading

‎src/core/webview/ClineProvider.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -604,6 +604,8 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
604604
"codicon.css",
605605
])
606606

607+
const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"])
608+
607609
const file = "src/index.tsx"
608610
const scriptUri = `http://${localServerUrl}/${file}`
609611

@@ -622,7 +624,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
622624
`font-src ${webview.cspSource}`,
623625
`style-src ${webview.cspSource} 'unsafe-inline' https://* http://${localServerUrl} http://0.0.0.0:${localPort}`,
624626
`img-src ${webview.cspSource} data:`,
625-
`script-src 'unsafe-eval' https://* https://*.posthog.com http://${localServerUrl} http://0.0.0.0:${localPort} 'nonce-${nonce}'`,
627+
`script-src 'unsafe-eval' ${webview.cspSource} https://* https://*.posthog.com http://${localServerUrl} http://0.0.0.0:${localPort} 'nonce-${nonce}'`,
626628
`connect-src https://* https://*.posthog.com ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`,
627629
]
628630

@@ -635,6 +637,9 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
635637
<meta http-equiv="Content-Security-Policy" content="${csp.join("; ")}">
636638
<link rel="stylesheet" type="text/css" href="${stylesUri}">
637639
<link href="${codiconsUri}" rel="stylesheet" />
640+
<script nonce="${nonce}">
641+
window.IMAGES_BASE_URI = "${imagesUri}"
642+
</script>
638643
<title>Roo Code</title>
639644
</head>
640645
<body>
@@ -683,6 +688,8 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
683688
"codicon.css",
684689
])
685690

691+
const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"])
692+
686693
// const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.js"))
687694

688695
// const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "reset.css"))
@@ -715,6 +722,9 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
715722
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src 'nonce-${nonce}' https://us-assets.i.posthog.com; connect-src https://openrouter.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
716723
<link rel="stylesheet" type="text/css" href="${stylesUri}">
717724
<link href="${codiconsUri}" rel="stylesheet" />
725+
<script nonce="${nonce}">
726+
window.IMAGES_BASE_URI = "${imagesUri}"
727+
</script>
718728
<title>Roo Code</title>
719729
</head>
720730
<body>

‎webview-ui/src/components/welcome/WelcomeView.tsx‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useCallback, useState } from "react"
22
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
3-
import { VSCodeButtonLink } from "../common/VSCodeButtonLink"
43
import { useExtensionState } from "../../context/ExtensionStateContext"
54
import { validateApiConfiguration } from "../../utils/validate"
65
import { vscode } from "../../utils/vscode"
@@ -26,6 +25,12 @@ const WelcomeView = () => {
2625
vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
2726
}, [apiConfiguration, currentApiConfigName])
2827

28+
// Using a lazy initializer so it reads once at mount
29+
const [imagesBaseUri] = useState(() => {
30+
const w = window as any
31+
return w.IMAGES_BASE_URI || ""
32+
})
33+
2934
return (
3035
<Tab>
3136
<TabContent className="flex flex-col gap-5">
@@ -37,34 +42,46 @@ const WelcomeView = () => {
3742
<h4 className="mt-3 mb-2">{t("welcome:startRouter")}</h4>
3843

3944
<div className="flex gap-4">
40-
<div className="flex-1 border border-vscode-panel-border rounded p-4 flex flex-col items-center">
41-
<VSCodeButtonLink
42-
href={getRequestyAuthUrl(uriScheme)}
43-
className="bg-blue-500 text-white w-16 h-16 flex items-center justify-center rounded mb-2 text-xl font-bold no-underline">
44-
REQ
45-
</VSCodeButtonLink>
45+
<a
46+
href={getRequestyAuthUrl(uriScheme)}
47+
className="flex-1 border border-vscode-panel-border rounded p-4 flex flex-col items-center cursor-pointer transition-all hover:bg-vscode-button-hoverBackground hover:border-vscode-button-border no-underline text-inherit"
48+
target="_blank"
49+
rel="noopener noreferrer">
50+
<div className="w-16 h-16 flex items-center justify-center rounded mb-2 overflow-hidden bg-white relative">
51+
<img
52+
src={`${imagesBaseUri}/requesty.png`}
53+
alt="Requesty"
54+
className="w-full h-full object-contain p-2"
55+
/>
56+
</div>
4657
<div className="text-center">
4758
<div className="font-bold">Requesty</div>
4859
<div className="text-sm text-vscode-descriptionForeground">
4960
{t("welcome:requestyDescription")}
5061
</div>
5162

52-
<div className="text-sm text-blue-400 font-bold">$1 free credit</div>
63+
<div className="text-sm font-bold">$1 free credit</div>
64+
</div>
65+
</a>
66+
<a
67+
href={getOpenRouterAuthUrl(uriScheme)}
68+
className="flex-1 border border-vscode-panel-border rounded p-4 flex flex-col items-center cursor-pointer transition-all hover:bg-vscode-button-hoverBackground hover:border-vscode-button-border no-underline text-inherit"
69+
target="_blank"
70+
rel="noopener noreferrer">
71+
<div className="w-16 h-16 flex items-center justify-center rounded mb-2 overflow-hidden bg-white relative">
72+
<img
73+
src={`${imagesBaseUri}/openrouter.png`}
74+
alt="OpenRouter"
75+
className="w-full h-full object-contain p-2"
76+
/>
5377
</div>
54-
</div>
55-
<div className="flex-1 border border-vscode-panel-border rounded p-4 flex flex-col items-center">
56-
<VSCodeButtonLink
57-
href={getOpenRouterAuthUrl(uriScheme)}
58-
className="bg-blue-500 text-white w-16 h-16 flex items-center justify-center rounded mb-2 text-xl font-bold no-underline">
59-
OR
60-
</VSCodeButtonLink>
6178
<div className="text-center">
6279
<div className="font-bold">OpenRouter</div>
6380
<div className="text-sm text-vscode-descriptionForeground">
6481
{t("welcome:openRouterDescription")}
6582
</div>
6683
</div>
67-
</div>
84+
</a>
6885
</div>
6986

7087
<div className="text-center my-4">or</div>

0 commit comments

Comments
 (0)