Skip to content

Commit 886a8a7

Browse files
brunobergherBruno Bergher
brunobergher
and
Bruno Bergher
authored
Onboarding tweaks to emphasize modes (#4791)
Co-authored-by: Bruno Bergher <[email protected]>
1 parent 28259e0 commit 886a8a7

File tree

21 files changed

+128
-143
lines changed

21 files changed

+128
-143
lines changed

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

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,17 @@ const RooHero = () => {
77
})
88

99
return (
10-
<div className="flex flex-col items-center justify-center pb-4 forced-color-adjust-none">
11-
<div
12-
style={{
13-
backgroundColor: "var(--vscode-foreground)",
14-
WebkitMaskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
15-
WebkitMaskRepeat: "no-repeat",
16-
WebkitMaskSize: "contain",
17-
maskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
18-
maskRepeat: "no-repeat",
19-
maskSize: "contain",
20-
}}
21-
className="mx-auto">
22-
<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
23-
</div>
10+
<div
11+
style={{
12+
backgroundColor: "var(--vscode-foreground)",
13+
WebkitMaskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
14+
WebkitMaskRepeat: "no-repeat",
15+
WebkitMaskSize: "contain",
16+
maskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
17+
maskRepeat: "no-repeat",
18+
maskSize: "contain",
19+
}}>
20+
<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
2421
</div>
2522
)
2623
}

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

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -49,18 +49,23 @@ const WelcomeView = () => {
4949

5050
return (
5151
<Tab>
52-
<TabContent className="flex flex-col gap-5">
52+
<TabContent className="flex flex-col gap-5 p-16">
5353
<RooHero />
54-
<h2 className="mx-auto">{t("chat:greeting")}</h2>
55-
56-
<div className="outline rounded p-4">
57-
<Trans i18nKey="welcome:introduction" />
54+
<h2 className="mt-0 mb-0">{t("welcome:greeting")}</h2>
55+
56+
<div className="font-bold">
57+
<p>
58+
<Trans i18nKey="welcome:introduction" />
59+
</p>
60+
<p>
61+
<Trans i18nKey="welcome:chooseProvider" />
62+
</p>
5863
</div>
5964

6065
<div className="mb-4">
61-
<h4 className="mt-3 mb-2 text-center">{t("welcome:startRouter")}</h4>
66+
<p className="font-bold mt-0">{t("welcome:startRouter")}</p>
6267

63-
<div className="flex gap-4">
68+
<div>
6469
{/* Define the providers */}
6570
{(() => {
6671
// Provider card configuration
@@ -89,32 +94,33 @@ const WelcomeView = () => {
8994
<a
9095
key={index}
9196
href={provider.authUrl}
92-
className="flex-1 border border-vscode-panel-border rounded p-4 flex flex-col items-center cursor-pointer transition-all no-underline text-inherit"
97+
className="flex-1 border border-vscode-panel-border hover:bg-secondary rounded-lg py-4 px-6 mb-2 flex flex-row gap-4 cursor-pointer transition-all no-underline text-inherit"
9398
target="_blank"
9499
rel="noopener noreferrer">
95-
<div className="font-bold">{provider.name}</div>
96-
<div className="w-16 h-16 flex items-center justify-center rounded m-2 overflow-hidden relative">
100+
<div className="w-10 h-10">
97101
<img
98102
src={`${imagesBaseUri}/${provider.slug}.png`}
99103
alt={provider.name}
100-
className="w-full h-full object-contain p-2"
104+
className="w-full h-full object-contain"
101105
/>
102106
</div>
103-
<div className="text-center">
104-
<div className="text-xs text-vscode-descriptionForeground">
105-
{provider.description}
107+
<div>
108+
<div className="font-bold text-vscode-foreground">{provider.name}</div>
109+
<div>
110+
<div className="text-xs text-vscode-descriptionForeground">
111+
{provider.description}
112+
</div>
113+
{provider.incentive && (
114+
<div className="text-xs font-bold">{provider.incentive}</div>
115+
)}
106116
</div>
107-
{provider.incentive && (
108-
<div className="text-xs font-bold">{provider.incentive}</div>
109-
)}
110117
</div>
111118
</a>
112119
))
113120
})()}
114121
</div>
115122

116-
<div className="text-center my-4 text-xl uppercase font-bold">{t("welcome:or")}</div>
117-
<h4 className="mt-3 mb-2 text-center">{t("welcome:startCustom")}</h4>
123+
<p className="font-bold mt-8 mb-6">{t("welcome:startCustom")}</p>
118124
<ApiOptions
119125
fromWelcomeView
120126
apiConfiguration={apiConfiguration || {}}

‎webview-ui/src/i18n/locales/ca/welcome.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
2-
"greeting": "Hola, sóc Roo!",
3-
"introduction": "<strong>Roo Code és el principal agent de codificació autònom.</strong> Prepara't per arquitectar, codificar, depurar i augmentar la teva productivitat com mai abans. Per continuar, Roo Code necessita una clau API.",
2+
"greeting": "Benvingut a Roo Code!",
3+
"introduction": "Amb una gamma de Modes integrats i ampliables, Roo Code et permet planificar, arquitectar, codificar, depurar i augmentar la teva productivitat com mai abans.",
44
"notice": "Per començar, aquesta extensió necessita un proveïdor d'API.",
55
"start": "Som-hi!",
6-
"chooseProvider": "Tria un proveïdor d'API per començar:",
76
"routers": {
87
"requesty": {
98
"description": "El teu router LLM optimitzat",
@@ -13,8 +12,9 @@
1312
"description": "Una interfície unificada per a LLMs"
1413
}
1514
},
16-
"startRouter": "Configuració ràpida a través d'un router",
17-
"startCustom": "Utilitza la teva pròpia clau API",
15+
"chooseProvider": "Per fer la seva màgia, Roo necessita una clau API.",
16+
"startRouter": "Recomanem utilitzar un router LLM:",
17+
"startCustom": "O pots utilitzar la teva pròpia clau API:",
1818
"telemetry": {
1919
"title": "Ajuda a millorar Roo Code",
2020
"anonymousTelemetry": "Envia dades d'ús i errors anònims per ajudar-nos a corregir errors i millorar l'extensió. No s'envia mai cap codi, text o informació personal.",
@@ -23,6 +23,5 @@
2323
"allow": "Permetre",
2424
"deny": "Denegar"
2525
},
26-
"or": "o",
2726
"importSettings": "Importar configuració"
2827
}

‎webview-ui/src/i18n/locales/de/welcome.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
2-
"greeting": "Hallo, ich bin Roo!",
3-
"introduction": "<strong>Roo Code ist der führende autonome Coding-Agent.</strong> Mach dich bereit, zu architektieren, zu coden, zu debuggen und deine Produktivität wie nie zuvor zu steigern. Um fortzufahren, benötigt Roo Code einen API-Schlüssel.",
2+
"greeting": "Willkommen bei Roo Code!",
3+
"introduction": "Mit einer Reihe von integrierten und erweiterbaren Modi ermöglicht dir Roo Code, zu planen, zu architektieren, zu coden, zu debuggen und deine Produktivität wie nie zuvor zu steigern.",
44
"notice": "Um loszulegen, benötigt diese Erweiterung einen API-Anbieter.",
55
"start": "Los geht's!",
6-
"chooseProvider": "Wähle einen API-Anbieter, um zu beginnen:",
76
"routers": {
87
"requesty": {
98
"description": "Dein optimierter LLM-Router",
@@ -13,8 +12,9 @@
1312
"description": "Eine einheitliche Schnittstelle für LLMs"
1413
}
1514
},
16-
"startRouter": "Express-Einrichtung über einen Router",
17-
"startCustom": "Eigenen API-Schlüssel verwenden",
15+
"chooseProvider": "Um seine Magie zu entfalten, benötigt Roo einen API-Schlüssel.",
16+
"startRouter": "Wir empfehlen die Verwendung eines LLM-Routers:",
17+
"startCustom": "Oder du kannst deinen eigenen API-Schlüssel verwenden:",
1818
"telemetry": {
1919
"title": "Hilf, Roo Code zu verbessern",
2020
"anonymousTelemetry": "Sende anonyme Fehler- und Nutzungsdaten, um uns bei der Fehlerbehebung und Verbesserung der Erweiterung zu helfen. Es werden niemals Code, Texte oder persönliche Informationen gesendet.",
@@ -23,6 +23,5 @@
2323
"allow": "Erlauben",
2424
"deny": "Ablehnen"
2525
},
26-
"or": "oder",
2726
"importSettings": "Einstellungen importieren"
2827
}

‎webview-ui/src/i18n/locales/en/chat.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"greeting": "Welcome to Roo Code",
2+
"greeting": "Welcome to Roo Code!",
33
"task": {
44
"title": "Task",
55
"seeMore": "See more",

‎webview-ui/src/i18n/locales/en/welcome.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
2-
"greeting": "Hi, I'm Roo!",
3-
"introduction": "<strong>Roo Code is the premiere autonomous coding agent.</strong> Get ready to architect, code, debug, and boost your productivity like you've never seen before. To continue, Roo Code requires an API key.",
2+
"greeting": "Welcome to Roo Code!",
3+
"introduction": "With a range of built-in and extensible Modes, Roo Code lets you plan, architect, code, debug and boost your productivity like never before.",
44
"notice": "To get started, this extension needs an API provider.",
55
"start": "Let's go!",
6-
"chooseProvider": "Choose an API provider to get started:",
76
"routers": {
87
"requesty": {
98
"description": "Your optimized LLM router",
@@ -13,8 +12,9 @@
1312
"description": "A unified interface for LLMs"
1413
}
1514
},
16-
"startRouter": "Express Setup Through a Router",
17-
"startCustom": "Bring Your Own API Key",
15+
"chooseProvider": "To do its magic, Roo needs an API key.",
16+
"startRouter": "We recommend using an LLM Router:",
17+
"startCustom": "Or you can bring your provider API key:",
1818
"telemetry": {
1919
"title": "Help Improve Roo Code",
2020
"anonymousTelemetry": "Send anonymous error and usage data to help us fix bugs and improve the extension. No code, prompts, or personal information is ever sent.",
@@ -23,6 +23,5 @@
2323
"allow": "Allow",
2424
"deny": "Deny"
2525
},
26-
"or": "or",
2726
"importSettings": "Import Settings"
2827
}

‎webview-ui/src/i18n/locales/es/welcome.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
2-
"greeting": "¡Hola, soy Roo!",
3-
"introduction": "<strong>Roo Code es el principal agente de codificación autónomo.</strong> Prepárate para arquitectar, codificar, depurar y aumentar tu productividad como nunca antes. Para continuar, Roo Code requiere una clave API.",
2+
"greeting": "¡Bienvenido a Roo Code!",
3+
"introduction": "Con una variedad de Modos integrados y extensibles, Roo Code te permite planificar, arquitectar, codificar, depurar y aumentar tu productividad como nunca antes.",
44
"notice": "Para comenzar, esta extensión necesita un proveedor de API.",
55
"start": "¡Vamos!",
6-
"chooseProvider": "Elige un proveedor de API para comenzar:",
76
"routers": {
87
"requesty": {
98
"description": "Tu router LLM optimizado",
@@ -13,8 +12,9 @@
1312
"description": "Una interfaz unificada para LLMs"
1413
}
1514
},
16-
"startRouter": "Configuración rápida a través de un router",
17-
"startCustom": "Usa tu propia clave API",
15+
"chooseProvider": "Para hacer su magia, Roo necesita una clave API.",
16+
"startRouter": "Recomendamos usar un router LLM:",
17+
"startCustom": "O puedes traer tu propia clave API:",
1818
"telemetry": {
1919
"title": "Ayuda a mejorar Roo Code",
2020
"anonymousTelemetry": "Envía datos de uso y errores anónimos para ayudarnos a corregir errores y mejorar la extensión. Nunca se envía código, texto o información personal.",
@@ -23,6 +23,5 @@
2323
"allow": "Permitir",
2424
"deny": "Denegar"
2525
},
26-
"or": "o",
2726
"importSettings": "Importar configuración"
2827
}

‎webview-ui/src/i18n/locales/fr/welcome.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
2-
"greeting": "Salut, je suis Roo !",
3-
"introduction": "<strong>Roo Code est l'agent de codage autonome de premier plan.</strong> Prépare-toi à architecturer, coder, déboguer et à augmenter ta productivité comme jamais auparavant. Pour continuer, Roo Code nécessite une clé API.",
2+
"greeting": "Bienvenue sur Roo Code !",
3+
"introduction": "Avec une gamme de Modes intégrés et extensibles, Roo Code te permet de planifier, architecturer, coder, déboguer et augmenter ta productivité comme jamais auparavant.",
44
"notice": "Pour commencer, cette extension a besoin d'un fournisseur d'API.",
55
"start": "C'est parti !",
6-
"chooseProvider": "Choisis un fournisseur d'API pour commencer :",
76
"routers": {
87
"requesty": {
98
"description": "Ton routeur LLM optimisé",
@@ -13,8 +12,9 @@
1312
"description": "Une interface unifiée pour les LLMs"
1413
}
1514
},
16-
"startRouter": "Configuration rapide via un routeur",
17-
"startCustom": "Utiliser ta propre clé API",
15+
"chooseProvider": "Pour faire sa magie, Roo a besoin d'une clé API.",
16+
"startRouter": "Nous recommandons d'utiliser un routeur LLM :",
17+
"startCustom": "Ou tu peux apporter ta propre clé API :",
1818
"telemetry": {
1919
"title": "Aide à améliorer Roo Code",
2020
"anonymousTelemetry": "Envoie des données d'utilisation et d'erreurs anonymes pour nous aider à corriger les bugs et améliorer l'extension. Aucun code, texte ou information personnelle n'est jamais envoyé.",
@@ -23,6 +23,5 @@
2323
"allow": "Autoriser",
2424
"deny": "Refuser"
2525
},
26-
"or": "ou",
2726
"importSettings": "Importer les paramètres"
2827
}

‎webview-ui/src/i18n/locales/hi/welcome.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
2-
"greeting": "नमस्ते, मैं रू हूँ!",
3-
"introduction": "<strong>Roo Code प्रमुख स्वायत्त कोडिंग एजेंट है।</strong> आर्किटेक्ट, कोड, डीबग करने और अपनी उत्पादकता को पहले कभी न देखे गए तरीके से बढ़ाने के लिए तैयार हो जाइए। जारी रखने के लिए, Roo Code को एक API कुंजी की आवश्यकता है।",
2+
"greeting": "Roo Code में आपका स्वागत है!",
3+
"introduction": "अंतर्निहित और विस्तारित मोड्स की एक श्रृंखला के साथ, Roo Code आपको पहले कभी न देखे गए तरीके से योजना बनाने, आर्किटेक्ट करने, कोड करने, डीबग करने और अपनी उत्पादकता बढ़ाने की अनुमति देता है।",
44
"notice": "शुरू करने के लिए, इस एक्सटेंशन को एक API प्रदाता की आवश्यकता है।",
55
"start": "चलो शुरू करें!",
6-
"chooseProvider": "शुरू करने के लिए एक API प्रदाता चुनें:",
76
"routers": {
87
"requesty": {
98
"description": "आपका अनुकूलित LLM राउटर",
@@ -13,8 +12,9 @@
1312
"description": "LLMs के लिए एक एकीकृत इंटरफेस"
1413
}
1514
},
16-
"startRouter": "राउटर के माध्यम से तेज़ सेटअप",
17-
"startCustom": "अपनी खुद की API कुंजी का उपयोग करें",
15+
"chooseProvider": "अपना जादू दिखाने के लिए, Roo को एक API कुंजी की आवश्यकता है।",
16+
"startRouter": "हम एक LLM राउटर का उपयोग करने की सलाह देते हैं:",
17+
"startCustom": "या आप अपनी खुद की API कुंजी ला सकते हैं:",
1818
"telemetry": {
1919
"title": "Roo Code को बेहतर बनाने में मदद करें",
2020
"anonymousTelemetry": "बग ठीक करने और एक्सटेंशन को बेहतर बनाने में हमारी मदद करने के लिए गुमनाम त्रुटि और उपयोग डेटा भेजें। कोड, संकेत या व्यक्तिगत जानकारी कभी नहीं भेजी जाती है।",
@@ -23,6 +23,5 @@
2323
"allow": "अनुमति दें",
2424
"deny": "अस्वीकार करें"
2525
},
26-
"or": "या",
2726
"importSettings": "सेटिंग्स आयात करें"
2827
}

‎webview-ui/src/i18n/locales/id/welcome.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
2-
"greeting": "Hai, saya Roo Code!",
3-
"introduction": "<strong>Roo Code adalah agen coding otonom terdepan.</strong> Bersiaplah untuk merancang, coding, debug, dan meningkatkan produktivitas seperti yang belum pernah Anda lihat sebelumnya. Untuk melanjutkan, Roo Code memerlukan API key.",
2+
"greeting": "Selamat datang di Roo Code!",
3+
"introduction": "Dengan berbagai Mode bawaan dan dapat diperluas, Roo Code memungkinkan Anda merencanakan, merancang, coding, debug, dan meningkatkan produktivitas seperti yang belum pernah terjadi sebelumnya.",
44
"notice": "Untuk memulai, ekstensi ini memerlukan provider API.",
55
"start": "Ayo mulai!",
6-
"chooseProvider": "Pilih provider API untuk memulai:",
76
"routers": {
87
"requesty": {
98
"description": "Router LLM yang dioptimalkan",
@@ -13,8 +12,9 @@
1312
"description": "Interface terpadu untuk LLM"
1413
}
1514
},
16-
"startRouter": "Setup Ekspres Melalui Router",
17-
"startCustom": "Bawa API Key Anda Sendiri",
15+
"chooseProvider": "Untuk melakukan keajaibannya, Roo membutuhkan API key.",
16+
"startRouter": "Kami merekomendasikan menggunakan Router LLM:",
17+
"startCustom": "Atau Anda dapat menggunakan API key Anda sendiri:",
1818
"telemetry": {
1919
"title": "Bantu Tingkatkan Roo Code",
2020
"anonymousTelemetry": "Kirim data error dan penggunaan anonim untuk membantu kami memperbaiki bug dan meningkatkan ekstensi. Tidak ada kode, prompt, atau informasi pribadi yang pernah dikirim.",
@@ -23,6 +23,5 @@
2323
"allow": "Izinkan",
2424
"deny": "Tolak"
2525
},
26-
"or": "atau",
2726
"importSettings": "Impor Pengaturan"
2827
}

0 commit comments

Comments
 (0)