Refactor action-suggestions.tsx to reduce duplication

Author: openhands-agent

Diff for: frontend/src/components/features/chat/action-suggestions.tsx

@@ -9,6 +9,14 @@ interface ActionSuggestionsProps {
   onSuggestionsClick: (value: string) => void;
 }
 
+// Define button configurations to reduce duplication
+interface ButtonConfig {
+  label: string;
+  value: string;
+  eventName: string;
+  callback?: () => void;
+}
+
 export function ActionSuggestions({
   onSuggestionsClick,
 }: ActionSuggestionsProps) {
@@ -19,6 +27,37 @@ export function ActionSuggestions({
 
   const [hasPullRequest, setHasPullRequest] = React.useState(false);
 
+  // Define the button configurations
+  const PUSH_TO_BRANCH: ButtonConfig = {
+    label: "Push to Branch",
+    value:
+      "Please push the changes to a remote branch on GitHub, but do NOT create a pull request. Please use the exact SAME branch name as the one you are currently on.",
+    eventName: "push_to_branch_button_clicked",
+  };
+
+  const PUSH_AND_CREATE_PR: ButtonConfig = {
+    label: "Push & Create PR",
+    value:
+      "Please push the changes to GitHub and open a pull request. Please create a meaningful branch name that describes the changes.",
+    eventName: "create_pr_button_clicked",
+    callback: () => setHasPullRequest(true),
+  };
+
+  const PUSH_TO_PR: ButtonConfig = {
+    label: "Push changes to PR",
+    value: "Please push the latest changes to the existing pull request.",
+    eventName: "push_to_pr_button_clicked",
+  };
+
+  // Helper function to handle button clicks
+  const handleButtonClick = (config: ButtonConfig) => {
+    posthog.capture(config.eventName);
+    onSuggestionsClick(config.value);
+    if (config.callback) {
+      config.callback();
+    }
+  };
+
   return (
     <div className="flex flex-col gap-2 mb-2">
       {githubTokenIsSet && selectedRepository && (
@@ -27,48 +66,26 @@ export function ActionSuggestions({
             <>
               <SuggestionItem
                 suggestion={{
-                  label: "Push to Branch",
-                  value:
-                    "Please push the changes to a remote branch on GitHub, but do NOT create a pull request. Please use the exact SAME branch name as the one you are currently on.",
-                }}
-                onClick={() => {
-                  posthog.capture("push_to_branch_button_clicked");
-                  // Ensure we're sending the correct value for this button
-                  onSuggestionsClick(
-                    "Please push the changes to a remote branch on GitHub, but do NOT create a pull request. Please use the exact SAME branch name as the one you are currently on.",
-                  );
+                  label: PUSH_TO_BRANCH.label,
+                  value: PUSH_TO_BRANCH.value,
                 }}
+                onClick={() => handleButtonClick(PUSH_TO_BRANCH)}
               />
               <SuggestionItem
                 suggestion={{
-                  label: "Push & Create PR",
-                  value:
-                    "Please push the changes to GitHub and open a pull request. Please create a meaningful branch name that describes the changes.",
-                }}
-                onClick={() => {
-                  posthog.capture("create_pr_button_clicked");
-                  // Ensure we're sending the correct value for this button
-                  onSuggestionsClick(
-                    "Please push the changes to GitHub and open a pull request. Please create a meaningful branch name that describes the changes.",
-                  );
-                  setHasPullRequest(true);
+                  label: PUSH_AND_CREATE_PR.label,
+                  value: PUSH_AND_CREATE_PR.value,
                 }}
+                onClick={() => handleButtonClick(PUSH_AND_CREATE_PR)}
               />
             </>
           ) : (
             <SuggestionItem
               suggestion={{
-                label: "Push changes to PR",
-                value:
-                  "Please push the latest changes to the existing pull request.",
-              }}
-              onClick={() => {
-                posthog.capture("push_to_pr_button_clicked");
-                // Ensure we're sending the correct value for this button
-                onSuggestionsClick(
-                  "Please push the latest changes to the existing pull request.",
-                );
+                label: PUSH_TO_PR.label,
+                value: PUSH_TO_PR.value,
               }}
+              onClick={() => handleButtonClick(PUSH_TO_PR)}
             />
           )}
         </div>