Quick variations button; allows users to generate 3 more variations i…

…mmediately

src/components/message/MessageGroup.tsx

@@ -2,16 +2,18 @@ import { PropsWithChildren } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import WindowClose from '~/icons/WindowClose'
+import WindowPlus from '~/icons/WindowPlus'
 import Delete from '~/icons/Delete'
 
 import { IMessageModel } from '~/models/MessageModel'
 import ToolTip from '~/components/Tooltip'
 
 type MessageGroupType = PropsWithChildren<{
   message: IMessageModel
+  onAddMoreVariations: () => void
 }>
 
-const MessageGroup = observer(({ message, children }: MessageGroupType) => {
+const MessageGroup = observer(({ message, children, onAddMoreVariations }: MessageGroupType) => {
   return (
     <div className="relative flex w-fit flex-col" key={message.uniqId}>
       <div className="sticky top-0 z-20 mr-4 flex w-full flex-row gap-2 bg-base-100 pb-2">
@@ -36,6 +38,15 @@ const MessageGroup = observer(({ message, children }: MessageGroupType) => {
         <span className="sticky top-0 text-sm font-semibold text-base-content/30">
           {message.variations.length + 1} Variations
         </span>
+
+        <ToolTip label="Add 3 more variations" placement="top" delay={400}>
+          <button
+            className="text-sm opacity-30 hover:scale-105 hover:opacity-100 ml-auto"
+            onClick={onAddMoreVariations}
+          >
+            <WindowPlus />
+          </button>
+        </ToolTip>
       </div>
 
       <div className="flex flex-col flex-wrap gap-4 rounded-md border border-base-content/10 p-2 pt-4">

src/containers/ChatBox.tsx

@@ -102,8 +102,18 @@ const ChatBox = observer(() => {
     const variations: IMessageModel[] = message.variations
     const allVariations = [message, ...variations]
 
+    const handleAddMoreVariations = () => {
+      _.times(3, () => {
+        incomingMessageStore.generateVariation(chat, message)
+      })
+    }
+
     return (
-      <MessageGroup message={message} key={message.uniqId + '_group'}>
+      <MessageGroup
+        message={message}
+        key={message.uniqId + '_group'}
+        onAddMoreVariations={handleAddMoreVariations}
+      >
         {allVariations.map((variant, index) => renderMessage(message, variant, index))}
       </MessageGroup>
     )

src/icons/WindowPlus.tsx

@@ -0,0 +1,11 @@
+// customized icon from the plus icon, edited via https://yqnn.github.io/svg-path-editor/
+
+export default function WindowPlus() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth={1.5}>
+        <path d="M14 21H4a2 2 0 01-2-2V5a2 2 0 012-2h16a2 2 0 012 2v8M2 7h20M5 5l0 0M8 5l0 0M11 5l0 0M17 19l6 0M20 16V22"></path>
+      </g>
+    </svg>
+  )
+}