fix(amazonq): display animation for Apply Diff and View Diff buttons (#5802)

ivikash · web-flow · commit 2d4f779b15db · 2024-10-17T10:33:01.000-07:00
Add animation for View Diff and Apply Diff buttons. Demo - https://github.com/user-attachments/assets/05092447-be86-4dc8-89b5-ecb7c4bfee0f License: I confirm that my contribution is made under the terms of the Apache 2.0 license.
diff --git a/packages/core/resources/css/amazonq-chat.css b/packages/core/resources/css/amazonq-chat.css
@@ -0,0 +1,25 @@
+/* Pulsating effect */
+@keyframes pulsate {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0.15;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+body[data-feature-viewdiffinchat='TREATMENT'] {
+    .mynah-syntax-highlighter-copy-buttons button:nth-of-type(2)::after, /* Accept Diff and Insert At Cursor */
+    .mynah-syntax-highlighter-copy-buttons button:nth-of-type(3)::after {
+        /* View Diff */
+        content: '';
+        animation-name: pulsate;
+        animation-duration: 1.5s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 2;
+        transform: translate3d(0%, 0, 0);
+    }
+}
diff --git a/packages/core/src/amazonq/webview/generators/webViewContent.ts b/packages/core/src/amazonq/webview/generators/webViewContent.ts
@@ -9,6 +9,20 @@ import { AuthUtil } from '../../../codewhisperer/util/authUtil'
 import { FeatureConfigProvider, FeatureContext, globals } from '../../../shared'
 
 export class WebViewContentGenerator {
+    private async generateFeatureConfigsData(): Promise<string> {
+        let featureConfigs = new Map<string, FeatureContext>()
+        try {
+            await FeatureConfigProvider.instance.fetchFeatureConfigs()
+            featureConfigs = FeatureConfigProvider.getFeatureConfigs()
+        } catch (error) {
+            // eslint-disable-next-line aws-toolkits/no-console-log
+            console.error('Error fetching feature configs:', error)
+        }
+
+        // Convert featureConfigs to a string suitable for data-features
+        return JSON.stringify(Array.from(featureConfigs.entries()))
+    }
+
     public async generate(extensionURI: Uri, webView: Webview): Promise<string> {
         const entrypoint = process.env.WEBPACK_DEVELOPER_SERVER
             ? 'http: localhost'
@@ -17,14 +31,25 @@ export class WebViewContentGenerator {
         const contentPolicy = `default-src ${entrypoint} data: blob: 'unsafe-inline';
         script-src ${entrypoint} filesystem: ws: wss: 'unsafe-inline';`
 
+        let featureDataAttributes = ''
+        try {
+            // Fetch and parse featureConfigs
+            const featureConfigs = JSON.parse(await this.generateFeatureConfigsData())
+            featureDataAttributes = featureConfigs
+                .map((config: FeatureContext[]) => `data-feature-${config[1].name}="${config[1].variation}"`)
+                .join(' ')
+        } catch (error) {
+            // eslint-disable-next-line aws-toolkits/no-console-log
+            console.error('Error setting data-feature attribute for featureConfigs:', error)
+        }
         return `<!DOCTYPE html>
         <html>
             <head>
                 <meta http-equiv="Content-Security-Policy" content="${contentPolicy}">
-                <title>Amazon Q (Preview)</title>                
-                ${await this.generateJS(extensionURI, webView)}                
+                <title>Amazon Q (Preview)</title>
+                ${await this.generateJS(extensionURI, webView)}
             </head>
-            <body>
+            <body ${featureDataAttributes}>
             </body>
         </html>`
     }
@@ -41,29 +66,27 @@ export class WebViewContentGenerator {
                 ? Uri.parse(serverHostname).with({ path: `/${source}` })
                 : webView.asWebviewUri(javascriptUri)
 
-        const cssEntrypoint = webView.asWebviewUri(
-            Uri.joinPath(globals.context.extensionUri, 'resources', 'css', 'amazonq-webview.css')
-        )
+        const cssEntrypoints = [
+            Uri.joinPath(globals.context.extensionUri, 'resources', 'css', 'amazonq-webview.css'),
+            Uri.joinPath(globals.context.extensionUri, 'resources', 'css', 'amazonq-chat.css'),
+        ]
 
-        let featureConfigs = new Map<string, FeatureContext>()
-        try {
-            await FeatureConfigProvider.instance.fetchFeatureConfigs()
-            featureConfigs = FeatureConfigProvider.getFeatureConfigs()
-        } catch (error) {
-            // eslint-disable-next-line aws-toolkits/no-console-log
-            console.error('Error fetching feature configs:', error)
-        }
+        const cssEntrypointsMap = cssEntrypoints.map((item) => webView.asWebviewUri(item))
+        const cssLinks = cssEntrypointsMap.map((uri) => `<link rel="stylesheet" href="${uri.toString()}">`).join('\n')
+
+        // Fetch featureConfigs and use it within the script
+        const featureConfigsString = await this.generateFeatureConfigsData()
 
         return `
         <script type="text/javascript" src="${javascriptEntrypoint.toString()}" defer onload="init()"></script>
-        <link rel="stylesheet" href="${cssEntrypoint.toString()}">
+        ${cssLinks}
         <script type="text/javascript">
             const init = () => {
                 createMynahUI(acquireVsCodeApi(), ${
                     (await AuthUtil.instance.getChatAuthState()).amazonQ === 'connected'
-                },${JSON.stringify(Array.from(featureConfigs.entries()))});
+                },${featureConfigsString});
             }
-    </script>
+        </script>
         `
     }
 }
