feat(amazonq): Update quick action styles and grouping (#4800)

Problem:
- quick actions list should not have a title anymore and needs a separator between /transform, /dev commands and the /help, /clear commands.
- Webview content is not fitting to its parent panel

Solution:
- Updated quick action commands group look&feel with mynah-ui v4.6.4
- Removed the groupName from /dev group. /transform and /dev combined in one group.
- Applied necessary body and html width and height styles to the webview's content which were not coming from mynah-ui.

Author: dogusata

.changes/next-release/Bug Fix-30a2f800-d1db-4bfe-94f3-439c8289b7d9.json

@@ -0,0 +1,4 @@
+{
+	"type": "Bug Fix",
+	"description": "Amazon Q Chat: Q panel doesn't fit to its parent"
+}

.changes/next-release/Feature-2b9a45f3-9c9d-47f2-9281-29e5a4abc051.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "Amazon Q Chat: Updates quick action commands style and groupings"
+}

package-lock.json

@@ -4316,7 +4316,7 @@
         "@aws-sdk/property-provider": "3.46.0",
         "@aws-sdk/smithy-client": "^3.46.0",
         "@aws-sdk/util-arn-parser": "^3.46.0",
-        "@aws/mynah-ui": "^4.5.6",
+        "@aws/mynah-ui": "^4.6.4",
         "@gerhobbelt/gitignore-parser": "^0.2.0-9",
         "@iarna/toml": "^2.2.5",
         "@smithy/shared-ini-file-loader": "^2.2.8",

packages/core/package.json

@@ -0,0 +1,10 @@
+body,
+html {
+    background-color: var(--mynah-color-bg);
+    color: var(--mynah-color-text-default);
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+}

packages/core/resources/css/amazonq-webview.css

@@ -16,6 +16,7 @@ import { TextMessageHandler } from './messages/handler'
 import { MessageController } from './messages/controller'
 import { getActions, getDetails } from './diffTree/actions'
 import { DiffTreeFileInfo } from './diffTree/types'
+import '../../../../resources/css/amazonq-webview.css'
 
 export const createMynahUI = (ideApi: any, amazonQEnabled: boolean) => {
     // eslint-disable-next-line prefer-const

packages/core/src/amazonq/webview/ui/main.ts

@@ -22,33 +22,28 @@ export class QuickActionGenerator {
 
     public generateForTab(tabType: TabType): QuickActionCommandGroup[] {
         const quickActionCommands = [
-            ...(this.isFeatureDevEnabled
-                ? [
-                      {
-                          groupName: 'Application Development',
-                          commands: [
+            {
+                commands: [
+                    ...(this.isFeatureDevEnabled
+                        ? [
                               {
                                   command: '/dev',
                                   placeholder: 'Briefly describe a task or issue',
                                   description:
                                       'Use all project files as context for code suggestions (increases latency).',
                               },
-                          ],
-                      },
-                  ]
-                : []),
-            ...(this.isGumbyEnabled
-                ? [
-                      {
-                          commands: [
+                          ]
+                        : []),
+                    ...(this.isGumbyEnabled
+                        ? [
                               {
                                   command: '/transform',
                                   description: 'Transform your Java 8 or 11 Maven project to Java 17',
                               },
-                          ],
-                      },
-                  ]
-                : []),
+                          ]
+                        : []),
+                ],
+            },
             {
                 commands: [
                     {
@@ -90,7 +85,6 @@ export class QuickActionGenerator {
 
         return quickActionCommands.map(commandGroup => {
             return {
-                groupName: commandGroup.groupName,
                 commands: commandGroup.commands.map((commandItem: QuickActionCommand) => {
                     const commandNotAvailable = commandUnavailability[tabType].unavailableItems.includes(
                         commandItem.command