fix(chat): Add programmer card on top of the page. (#7041)

## Problem
We want to show the programmer card on top of the page. And change the
welcome message

## Solution

![image](https://github.com/user-attachments/assets/b119a626-6519-4700-bc07-299db32de135)


---

- Treat all work as PUBLIC. Private `feature/x` branches will not be
squash-merged at release time.
- Your code changes must meet the guidelines in
[CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines).
- License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

Author: Randall-Jiang

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

@@ -130,6 +130,6 @@ div.mynah-card.padding-large {
 }
 
 .mynah-chat-wrapper {
-    padding: 0.75rem 1.25rem !important; /* 12px top/bottom, 20px left/right */
+    padding: 0.75rem 1.25rem;
     box-sizing: border-box;
 }

packages/core/src/amazonq/webview/ui/tabs/generator.ts

@@ -56,6 +56,18 @@ export class TabDataGenerator {
         if (tabType === 'welcome') {
             return {}
         }
+        const programmerModeCard: ChatItem | undefined = {
+            type: ChatItemType.ANSWER,
+            title: 'NEW FEATURE',
+            header: {
+                icon: 'code-block',
+                iconStatus: 'primary',
+                body: '## Pair programmer mode',
+            },
+            fullWidth: true,
+            canBeDismissed: true,
+            body: 'Pair code with Amazon Q, your virtual pair programmer that can work alongside you autonomously making real-time code changes on your behalf. \n\n Switch off pair programmer mode to get read-only responses from Q.',
+        }
 
         const regionProfileCard: ChatItem | undefined =
             this.regionProfile === undefined
@@ -67,6 +79,15 @@ export class TabDataGenerator {
                       messageId: 'regionProfile',
                   }
 
+        const welcomeMessage = `Hi! I'm Amazon Q.
+
+You can ask me to:
+• Create new projects and files
+• Make changes to your codebase
+• Explain how to do things
+
+Enter \`/\` to view quick actions. Use \`@\` to add saved prompts, files, folders, or your entire workspace as context.`
+
         const tabData: MynahUIDataModel = {
             tabTitle: taskName ?? TabTypeDataMap[tabType].title,
             promptInputInfo:
@@ -76,10 +97,11 @@ export class TabDataGenerator {
             contextCommands: this.getContextCommands(tabType),
             chatItems: needWelcomeMessages
                 ? [
+                      ...(tabType === 'cwc' || tabType === 'unknown' ? [programmerModeCard] : []),
                       ...(regionProfileCard ? [regionProfileCard] : []),
                       {
                           type: ChatItemType.ANSWER,
-                          body: isSMUS ? qChatIntroMessageForSMUS : TabTypeDataMap[tabType].welcome,
+                          body: isSMUS ? qChatIntroMessageForSMUS : welcomeMessage,
                       },
                       {
                           type: ChatItemType.ANSWER,
@@ -88,7 +110,7 @@ export class TabDataGenerator {
                   ]
                 : [...(regionProfileCard ? [regionProfileCard] : [])],
             promptInputOptions:
-                tabType === 'cwc'
+                tabType === 'cwc' || tabType === 'unknown'
                     ? [
                           {
                               type: 'switch',