feature request: make “Format as” button a split dropdown button

[swimbo]

As a user, I want to be able to force the AI to use a template I choose when it automatically chooses the wrong template.

A simple way to do this would be to use a split dropdown button, where the left part executes the recommended actionon click, but if you don’t want to do that action, then the right is a dropdown of the template options. Here’s the Bootstrap equivalent of what I’m talking about: https://getbootstrap.com/docs/4.0/components/dropdowns/#split-button-dropdowns

However, it looks like you’re using Class Variance Authority (cva) in combination with Radix UI, so here’s that equivalent code according to chatgpt:

To modify the provided button component code to create a split dropdown button, you can extend the current setup by adding a new variant that supports a split button. A split dropdown button typically has two parts: the main action button and a smaller dropdown button next to it. Here’s how you can achieve this:

1.  Update the Button Component: Add a new variant for the split button.
2.  Create a Dropdown: Add a dropdown menu component that will be triggered by the dropdown part of the split button.
3.  Combine: Create a component that combines these two parts into a split dropdown button.

Here’s a step-by-step implementation:

1. Update the Button Component

Add a new variant to the buttonVariants for the split button:

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        split: "flex bg-primary text-primary-foreground", // New split button variant
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

2. Create the Split Dropdown Button Component

Now, create a new SplitDropdownButton component that will combine the main action button with a smaller dropdown button:

import { Button, buttonVariants } from "./Button"; // Import the existing Button component

const SplitDropdownButton = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn("inline-flex", className)}
      {...props}
    >
      {/* Main Action Button */}
      <Button variant="split" className="rounded-r-none">
        Main Action
      </Button>

      {/* Dropdown Button */}
      <Button variant="split" className="rounded-l-none px-2">
        ▼
      </Button>
    </div>
  );
});

SplitDropdownButton.displayName = "SplitDropdownButton";

export { SplitDropdownButton };

3. Usage Example

You can now use the SplitDropdownButton in your application like this:

import { SplitDropdownButton } from "./SplitDropdownButton";

function App() {
  return (
    <div>
      <SplitDropdownButton />
    </div>
  );
}

export default App;

Notes:

•   Dropdown Implementation: This example assumes you will implement the dropdown logic, which could be another component or an inline menu. You can use libraries like Radix UI, or implement your own dropdown logic.
•   Styling Adjustments: Adjust the split variant styles according to your design needs. You might want to style the dropdown part differently (e.g., using icons or adding more margin/padding).

[swimbo]

@aexshafii the speed on getting this out was amazing, but I think you want a bit of what you had + optionality.

Originally: It recommended a template + a button click applied it. …but you can’t change it.

version 1.37.24: It allows you to select a template from a dropdown. …but now it doesn’t recommend a template.

Ideal IMO: It recommends a template + if you disagree, then you can change it. // ~75% of the time the recommendation is correct. So I don’t think you want to get rid of that recommended template feature because it’s both useful and very inline with your AI/Automation value prop.

Hopefully that’s helpful!

[aexshafii]

@swimbo I believe this is what I implemented: https://www.loom.com/share/1d12595c827d43d583f30f5b9ab27a24 Or do you mean something different than what you can see in this video?

[swimbo]

Ahh! @aexshafii mine just has the words “Select template” and isn’t choosing one to start. MIght be a local install issue, though. Let me do a fresh pull and build.

[swimbo]

Fixed it with: git reset --hard origin/master

Thanks for the quick reply!

[aexshafii]

ahh okay great! And thanks to you for helping out with this issue 🙏