From f85e82a6a3f0f0bc99c5bdb8b73855376d8beaab Mon Sep 17 00:00:00 2001
From: Simon Graband <sgraband@eclipsesource.com>
Date: Tue, 4 Mar 2025 08:56:40 +0100
Subject: [PATCH] Sync getting-started-page with framework

This way we do not need to manually adapt the text in the AI Banner, when its updated in the framework.
Also added a padding to the float container as this looked odd before.

Signed-off-by: Simon Graband <sgraband@eclipsesource.com>
---
 .../product/src/browser/style/index.css       |  1 +
 .../theia-ide-getting-started-widget.tsx      | 51 ++-----------------
 2 files changed, 6 insertions(+), 46 deletions(-)

diff --git a/theia-extensions/product/src/browser/style/index.css b/theia-extensions/product/src/browser/style/index.css
index e3c2ffa9a..a536c1fe5 100644
--- a/theia-extensions/product/src/browser/style/index.css
+++ b/theia-extensions/product/src/browser/style/index.css
@@ -34,6 +34,7 @@
 
 .gs-float {
     float: right;
+    padding-left: 20px;
 }
 
 .gs-logo {
diff --git a/theia-extensions/product/src/browser/theia-ide-getting-started-widget.tsx b/theia-extensions/product/src/browser/theia-ide-getting-started-widget.tsx
index 7038ed8e9..1302646e7 100644
--- a/theia-extensions/product/src/browser/theia-ide-getting-started-widget.tsx
+++ b/theia-extensions/product/src/browser/theia-ide-getting-started-widget.tsx
@@ -155,51 +155,10 @@ export class TheiaIDEGettingStartedWidget extends GettingStartedWidget {
     }
 
     protected renderAIBanner(): React.ReactNode {
-        return <div className='gs-section'>
-            <div className='flex-grid'>
-                <div className='col'>
-                    <h3 className='gs-section-header'> 🚀 AI Support in the Theia IDE is available! [Experimental] ✨</h3>
-
-                    <div className='gs-action-container'>
-                        Theia IDE now contains experimental AI support, which offers early access to cutting-edge AI capabilities within your IDE.
-                        <br />
-                        Please note that these features are disabled by default, ensuring that users can opt-in at their discretion.
-                        For those who choose to enable AI support, it is important to be aware that these experimental features may generate continuous
-                        requests to the language models (LLMs) you provide access to. This might incur costs that you need to monitor closely.
-                        <br />
-                        For more details, please visit &nbsp;
-                        <a
-                            role={'button'}
-                            tabIndex={0}
-                            onClick={() => this.doOpenExternalLink(this.theiaAIDocUrl)}
-                            onKeyDown={(e: React.KeyboardEvent) => this.doOpenExternalLinkEnter(e, this.theiaAIDocUrl)}>
-                            {'the documentation'}
-                        </a>.
-                        <br />
-                        <br />
-                        🚧 Please note that this feature is currently in development and may undergo frequent changes.
-                        We welcome your feedback, contributions, and sponsorship! To support the ongoing development of the AI capabilities please visit the&nbsp;
-                        <a
-                            role={'button'}
-                            tabIndex={0}
-                            onClick={() => this.doOpenExternalLink(this.ghProjectUrl)}
-                            onKeyDown={(e: React.KeyboardEvent) => this.doOpenExternalLinkEnter(e, this.ghProjectUrl)}>
-                            {'Github Project'}
-                        </a>.
-                        &nbsp;Thank you for being part of our community!
-                    </div>
-                    <div className='gs-action-container'>
-                        <a
-                            role={'button'}
-                            style={{ fontSize: 'var(--theia-ui-font-size2)' }}
-                            tabIndex={0}
-                            onClick={() => this.doOpenAIChatView()}
-                            onKeyDown={(e: React.KeyboardEvent) => this.doOpenAIChatViewEnter(e)}>
-                            {'Open the AI Chat View now to learn how to start! ✨'}
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>;
+        const framework = super.renderAIBanner();
+        if (React.isValidElement<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>(framework)) {
+            return React.cloneElement(framework, { className: 'gs-section' });
+        }
+        return framework;
     }
 }