refine the AIGC dropdown list

Author: xuruiyao-msft

Word-Add-in-AIGC/src/taskpane/components/Home.tsx

@@ -1,5 +1,5 @@
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import { Button, Dropdown, MenuProps, message } from "antd";
+import { LeftOutlined, RightOutlined, DownOutlined } from "@ant-design/icons";
+import { Button, Dropdown, MenuProps, Space, message } from "antd";
 import React from "react";
 import AIKeyConfigDialog from "./AIKeyConfigDialog";
 import { apiKey, deployment, dropdownMenus, endpoint, generateText } from "./utility/AIData";
@@ -231,21 +231,21 @@ export default class Home extends React.Component {
             case "commentPredefined":
                 await this.insertComment(predefinedComment);
                 break;
-            case "formatPredefined":
-                await this.formatDocument();
-                break;
-            case "picturePredefined":
-                await this.insertPicture(predefinedPictureBase64);
-                break;
         }
     }
 
     generateMenuItems = (type: string): MenuProps["items"] => {
         return dropdownMenus[type].map((item) => {
-            return {
-                key: item.key,
-                label: <div style={{ textAlign: "center" }}><span>{item.desc}</span></div>,
-                onClick: this.onMenuClick
+            if (item.type === "divider") {
+                return { type: "divider" };
+            }
+            else {
+                return {
+                    key: item.key,
+                    label: <div style={{ textAlign: "center" }}><span>{item.desc}</span></div>,
+                    onClick: this.onMenuClick,
+                    selectable: true,
+                };
             }
         })
     }
@@ -258,10 +258,6 @@ export default class Home extends React.Component {
 
         const addCommentItems: MenuProps['items'] = this.generateMenuItems("comment");
 
-        const formatDocumentItems: MenuProps['items'] = this.generateMenuItems("format");
-
-        const addPictureItems: MenuProps['items'] = this.generateMenuItems("picture");
-
         return (
           <>
                 <div className="wrapper">
@@ -275,26 +271,36 @@ export default class Home extends React.Component {
                                     </div>
                                 </div>
                                 <div className="main_func">
-                                    <Dropdown menu={{ items: addTitleItems }} placement="bottom" className="generate_button" arrow>
-                                        <Button loading={this.state.titleLoading}>Add a title</Button>
+                                    <Dropdown menu={{ items: addTitleItems }} className="dropdown_list">
+                                        <Button loading={this.state.titleLoading}>
+                                            <Space>
+                                                Add a title
+                                                <DownOutlined />
+                                            </Space>
+                                        </Button>
                                     </Dropdown>
-                                    <Dropdown menu={{ items: addCommentItems }} placement="bottom" className="generate_button" arrow>
-                                        <Button loading={this.state.commentLoading}>Add comments</Button>
+                                    <Dropdown menu={{ items: addCommentItems }} className="dropdown_list">
+                                        <Button loading={this.state.commentLoading}>
+                                            <Space>
+                                                Add a comment
+                                                <DownOutlined />
+                                            </Space>
+                                        </Button>
                                     </Dropdown>
-                                    <Dropdown menu={{ items: addCitationItems }} placement="bottom" className="generate_button" arrow>
-                                        <Button loading={this.state.citationLoading}>Add citation in footnotes</Button>
-                                    </Dropdown>
-                                    <Dropdown
-                                        menu={{ items: formatDocumentItems }}
-                                        placement="bottom"
-                                        className="generate_button"
-                                        arrow
-                                    >
-                                        <Button loading={this.state.formatLoading}>Format the document</Button>
-                                    </Dropdown>
-                                    <Dropdown menu={{ items: addPictureItems }} placement="bottom" className="generate_button" arrow>
-                                        <Button loading={this.state.pictureLoading}>Add a picture</Button>
+                                    <Dropdown menu={{ items: addCitationItems }} className="dropdown_list">
+                                        <Button loading={this.state.citationLoading}>
+                                            <Space>
+                                                Add a citation in footnotes
+                                                <DownOutlined />
+                                            </Space>
+                                        </Button>
                                     </Dropdown>
+                                    <Button loading={this.state.pictureLoading} className="insert_button" onClick={()=>this.insertPicture(predefinedPictureBase64)}>
+                                        Add a predefined picture
+                                    </Button>
+                                    <Button loading={this.state.formatLoading} className="insert_button" onClick={this.formatDocument}>
+                                        Format the document
+                                    </Button>
                                 </div>
                                 <AIKeyConfigDialog
                                     isOpen={this.state.openKeyConfigDialog}
@@ -332,17 +338,17 @@ export default class Home extends React.Component {
                                     onClick={this.insertTemplateDocument}
                                     loading={this.state.importTemplateLoading}
                                 >
-                                    Generate Sample Document
+                                    Generate sample content
                                 </Button>
                                 <div className="generate_button_or">or</div>
-                                <Button className="generate_button" onClick={this.openMainFunc}>
-                                    Skip With Current Document
-                                </Button>
+                                    <Button className="generate_button" onClick={this.openMainFunc}>
+                                        Skip generating sample content
+                                    </Button>
                             </>
                         )}
                     </div>
                     <div className="bottom">
-                        <div className="item_desc">For next steps:</div>
+                        <div className="item_desc">Explore more resources:</div>
                         <div className="bottom_item">
                             <RightOutlined className="item_icon" />
                             <div className="bottom_item_info">

Word-Add-in-AIGC/src/taskpane/components/utility/AIData.tsx

@@ -10,45 +10,42 @@ export const deployment = ""
 
 export const dropdownMenus = {
     title: [
-        {
-            desc: "Add a title generated by Azure OpenAI",
-            key: "titleAI"
-        },
         {
             desc: "Add a predefined title",
             key: "titlePredefined"
-        }
-    ],
-    citation: [
+        },
         {
-            desc: "Add a citation generated by Azure OpenAI",
-            key: "citationAI"
+            type: "divider"
         },
         {
-            desc: "Add a predefined citation",
-            key: "citationPredefined"
+            desc: "Add a title generated by AI",
+            key: "titleAI"
         }
     ],
     comment: [
-        {
-            desc: "Add a comment generated by Azure OpenAI",
-            key: "commentAI"
-        },
         {
             desc: "Add a predefined comment",
             key: "commentPredefined"
-        }
-    ],
-    format: [
+        },
         {
-            desc: "Format the document by predefined rules",
-            key: "formatPredefined"
+            type: "divider"
+        },
+        {
+            desc: "Add a comment generated by AI",
+            key: "commentAI"
         }
     ],
-    picture: [
+    citation: [
         {
-            desc: "Add a predefined picture",
-            key: "picturePredefined"
+            desc: "Add a predefined citation",
+            key: "citationPredefined"
+        },
+        {
+            type: "divider"
+        },
+        {
+            desc: "Add a citation generated by AI",
+            key: "citationAI"
         }
     ]
 }

Word-Add-in-AIGC/src/taskpane/css/sample.css

@@ -15,6 +15,7 @@ body,
     margin: 0;
     padding: 0;
     border-width: 0;
+    overflow: hidden;
 }
 
 .f1i3iumi {
@@ -23,6 +24,7 @@ body,
     margin: 0;
     padding: 0;
     border-width: 0;
+    overflow: hidden;
 }
 
 .wrapper {
@@ -32,7 +34,8 @@ body,
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     background-color: #F0F0F0;
 }
 
@@ -77,7 +80,7 @@ a {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 }
 
 .back {
@@ -108,6 +111,14 @@ a {
     font-size: 1rem;
 }
 
+.dropdown_list,
+.insert_button {
+    width: 90%;
+    color: var(--blue);
+    margin: 1.5rem;
+    font-weight: 500;
+}
+
 .bottom {
     width: 100%;
 }