feat: support copy to clipboard

feat: move regenerate to all messages
feat: move stop generate to replace submit button
feat: make options' position more clear

client/package.json

@@ -31,6 +31,7 @@
     "axios": "^1.3.4",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",
+    "copy-to-clipboard": "^3.3.3",
     "crypto-browserify": "^3.12.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.113.0",

client/src/components/Input/BingAIOptions/index.jsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect, forwardRef } from 'react';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { cn } from '~/utils';
+import { Button } from '../../ui/Button.tsx';
+import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
+
+import store from '~/store';
+
+// function BingStyles(props, ref) {
+//   const [conversation, setConversation] = useRecoilState(store.conversation) || {};
+//   const { endpoint, conversationId, jailbreak, toneStyle } = conversation;
+//   const messages = useRecoilValue(store.messages);
+
+//   const isBing = endpoint === 'bingAI';
+
+//   const show = isBing && (!conversationId || messages?.length === 0 || props.show);
+//   const defaultClasses =
+//     'p-2 rounded-md min-w-[75px] font-normal bg-white/[.60] dark:bg-gray-700 text-black text-xs';
+//   const defaultSelected = cn(defaultClasses, 'font-medium data-[state=active]:text-white text-xs text-white');
+
+//   const selectedClass = val => val + '-tab ' + defaultSelected;
+
+//   const changeHandler = value => {
+//     setConversation(prevState => ({ ...prevState, toneStyle: value }));
+//   };
+
+function BingAIOptions({ ref }) {
+  const [conversation, setConversation] = useRecoilState(store.conversation) || {};
+  const messages = useRecoilValue(store.messages);
+  const { endpoint, conversationId } = conversation;
+
+  if (endpoint !== 'bingAI') return null;
+
+  const isBing = endpoint === 'bingAI';
+  const show = isBing && (!conversationId || messages?.length === 0);
+
+  const changeHandler = value => {
+    setConversation(prevState => ({ ...prevState, toneStyle: value }));
+  };
+
+  const { toneStyle } = conversation;
+
+  const cardStyle =
+    'shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
+  const defaultClasses =
+    'p-2 rounded-md min-w-[75px] font-normal bg-white/[.60] dark:bg-gray-700 text-black text-xs';
+  const defaultSelected = cn(defaultClasses, 'font-medium data-[state=active]:text-white text-xs text-white');
+  const selectedClass = val => val + '-tab ' + defaultSelected;
+
+  //   <Button
+  //   type="button"
+  //   className={
+  //     cardStyle +
+  //     ' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
+  //   }
+  //   onClick={triggerAdvancedMode}
+  // >
+  //   <span className="w-full text-center text-xs font-medium font-normal">More</span>
+  // </Button>
+  return (
+    <div className={' flex w-full items-center justify-center gap-2'}>
+      <Tabs
+        value={toneStyle}
+        className={
+          cardStyle +
+          ' flex h-[40px] items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-600'
+        }
+        onValueChange={changeHandler}
+        // ref={ref}
+      >
+        <TabsList className="bg-white/[.60] dark:bg-gray-700">
+          <TabsTrigger
+            value="creative"
+            className={`${toneStyle === 'creative' ? selectedClass('creative') : defaultClasses}`}
+          >
+            {'Creative'}
+          </TabsTrigger>
+          <TabsTrigger
+            value="fast"
+            className={`${toneStyle === 'fast' ? selectedClass('fast') : defaultClasses}`}
+          >
+            {'Fast'}
+          </TabsTrigger>
+          <TabsTrigger
+            value="balanced"
+            className={`${toneStyle === 'balanced' ? selectedClass('balanced') : defaultClasses}`}
+          >
+            {'Balanced'}
+          </TabsTrigger>
+          <TabsTrigger
+            value="precise"
+            className={`${toneStyle === 'precise' ? selectedClass('precise') : defaultClasses}`}
+          >
+            {'Precise'}
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}
+
+export default BingAIOptions;

client/src/components/Input/OpenAIOptions/index.jsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import ModelSelect from './ModelSelect';
 import { Button } from '../../ui/Button.tsx';
 
 import store from '~/store';
 
-function OpenAIOptions({ conversation = {} }) {
+function OpenAIOptions() {
-  const { endpoint } = conversation;
   const [advancedMode, setAdvancedMode] = useState(false);
-  const setConversation = useSetRecoilState(store.conversation);
+  const [conversation, setConversation] = useRecoilState(store.conversation) || {};
+  const { endpoint } = conversation;
 
   const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
 

client/src/components/Input/SubmitButton.jsx

@@ -1,65 +1,78 @@
 import React from 'react';
+import StopGeneratingIcon from '../svg/StopGeneratingIcon';
 
-export default function SubmitButton({ submitMessage, disabled, isSubmitting }) {
+export default function SubmitButton({ submitMessage, handleStopGenerating, disabled, isSubmitting }) {
   const clickHandler = e => {
     e.preventDefault();
     submitMessage();
   };
 
-  if (isSubmitting) {
+  if (isSubmitting)
     return (
       <button
-        className="absolute bottom-0 right-1 h-[100%] w-[40px] rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2"
+        onClick={handleStopGenerating}
-        disabled
+        type="button"
+        className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
       >
-        <div className="text-2xl">
+        <div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
-          <span style={{ maxWidth: 5.5, display: 'inline-grid' }}>·</span>
+          <StopGeneratingIcon />
-          <span
+        </div>
-            className="blink"
+      </button>
-            style={{ maxWidth: 5.5, display: 'inline-grid' }}
+    );
-          >
+  // // previous three dot animation
-            ·
+  // return (
-          </span>
+  //   <button
-          <span
+  //     className="absolute bottom-0 right-1 h-[100%] w-[40px] rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2"
-            className="blink2"
+  //     disabled
-            style={{ maxWidth: 5.5, display: 'inline-grid' }}
+  //   >
-          >
+  //     <div className="text-2xl">
-            ·
+  //       <span style={{ maxWidth: 5.5, display: 'inline-grid' }}>·</span>
-          </span>
+  //       <span
+  //         className="blink"
+  //         style={{ maxWidth: 5.5, display: 'inline-grid' }}
+  //       >
+  //         ·
+  //       </span>
+  //       <span
+  //         className="blink2"
+  //         style={{ maxWidth: 5.5, display: 'inline-grid' }}
+  //       >
+  //         ·
+  //       </span>
+  //     </div>
+  //   </button>
+  // );
+  else
+    return (
+      <button
+        onClick={clickHandler}
+        disabled={disabled}
+        className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
+      >
+        <div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+          <svg
+            stroke="currentColor"
+            fill="none"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="mr-1 h-4 w-4 "
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="22"
+              y1="2"
+              x2="11"
+              y2="13"
+            />
+            <polygon points="22 2 15 22 11 13 2 9 22 2" />
+          </svg>
         </div>
       </button>
     );
-  }
-  return (
-    <button
-      onClick={clickHandler}
-      disabled={disabled}
-      className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
-    >
-      <div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
-        <svg
-          stroke="currentColor"
-          fill="none"
-          strokeWidth="2"
-          viewBox="0 0 24 24"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="mr-1 h-4 w-4 "
-          height="1em"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <line
-            x1="22"
-            y1="2"
-            x2="11"
-            y2="13"
-          />
-          <polygon points="22 2 15 22 11 13 2 9 22 2" />
-        </svg>
-      </div>
-    </button>
-  );
 }
 
 {

client/src/components/Input/index.jsx

@@ -3,12 +3,11 @@ import { useRecoilValue, useRecoilState } from 'recoil';
 import SubmitButton from './SubmitButton';
 import AdjustToneButton from './AdjustToneButton';
 import OpenAIOptions from './OpenAIOptions';
-import BingStyles from './BingStyles';
+import BingAIOptions from './BingAIOptions';
+// import BingStyles from './BingStyles';
 import EndpointMenu from './Endpoints/EndpointMenu';
 import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
-import RegenerateIcon from '../svg/RegenerateIcon';
-import StopGeneratingIcon from '../svg/StopGeneratingIcon';
 import { useMessageHandler } from '../../utils/handleSubmit';
 
 import store from '~/store';
@@ -28,10 +27,10 @@ export default function TextChat({ isSearchView = false }) {
   // TODO: do we need this?
   const disabled = false;
 
-  const { ask, regenerate, stopGenerating } = useMessageHandler();
+  const { ask, stopGenerating } = useMessageHandler();
 
-  const bingStylesRef = useRef(null);
+  // const bingStylesRef = useRef(null);
-  const [showBingToneSetting, setShowBingToneSetting] = useState(false);
+  // const [showBingToneSetting, setShowBingToneSetting] = useState(false);
 
   const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
 
@@ -41,32 +40,28 @@ export default function TextChat({ isSearchView = false }) {
     setText('');
   }, [conversation?.conversationId]);
 
-  // controls the height of Bing tone style tabs
+  // // controls the height of Bing tone style tabs
-  useEffect(() => {
+  // useEffect(() => {
-    if (!inputRef.current) {
+  //   if (!inputRef.current) {
-      return; // wait for the ref to be available
+  //     return; // wait for the ref to be available
-    }
+  //   }
 
-    const resizeObserver = new ResizeObserver(() => {
+  //   const resizeObserver = new ResizeObserver(() => {
-      const newHeight = inputRef.current.clientHeight;
+  //     const newHeight = inputRef.current.clientHeight;
-      if (newHeight >= 24) {
+  //     if (newHeight >= 24) {
-        // 24 is the default height of the input
+  //       // 24 is the default height of the input
-        bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
+  //       // bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
-      }
+  //     }
-    });
+  //   });
-    resizeObserver.observe(inputRef.current);
+  //   resizeObserver.observe(inputRef.current);
-    return () => resizeObserver.disconnect();
+  //   return () => resizeObserver.disconnect();
-  }, [inputRef]);
+  // }, [inputRef]);
 
   const submitMessage = () => {
     ask({ text });
     setText('');
   };
 
-  const handleRegenerate = () => {
-    if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
-  };
-
   const handleStopGenerating = () => {
     stopGenerating();
   };
@@ -125,78 +120,78 @@ export default function TextChat({ isSearchView = false }) {
     return '';
   };
 
-  const handleBingToneSetting = () => {
+  // const handleBingToneSetting = () => {
-    setShowBingToneSetting(show => !show);
+  //   setShowBingToneSetting(show => !show);
-  };
+  // };
 
   if (isSearchView) return <></>;
 
   return (
     <>
-      <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
+      <div className="fixed bottom-0 left-0 w-full md:absolute">
-        <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
+        <div className="relative py-2 md:mb-[-16px] md:py-4 lg:mb-[-32px]">
-          <div className="relative flex h-full flex-1 md:flex-col">
+          {/* <span className="order-last ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:w-full md:gap-2">
-            <span className="order-last ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
+            { : latestMessage && !latestMessage?.isCreatedByUser ? (
-              {isSubmitting ? (
+              <button
-                <button
+                onClick={handleRegenerate}
-                  onClick={handleStopGenerating}
+                className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
-                  className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
+                type="button"
-                  type="button"
+              >
-                >
+                <RegenerateIcon />
-                  <StopGeneratingIcon />
+                <span className="hidden md:block">Regenerate response</span>
-                  <span className="hidden md:block">Stop generating</span>
+              </button>
-                </button>
+            ) : null}
-              ) : latestMessage && !latestMessage?.isCreatedByUser ? (
+          </span> */}
-                <button
+          <span className="ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:w-full md:gap-2">
-                  onClick={handleRegenerate}
+            <OpenAIOptions />
-                  className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
+            <BingAIOptions />
-                  type="button"
+            {/* <BingStyles
-                >
-                  <RegenerateIcon />
-                  <span className="hidden md:block">Regenerate response</span>
-                </button>
-              ) : null}
-              <OpenAIOptions conversation={conversation} />
-              <BingStyles
                 ref={bingStylesRef}
                 show={showBingToneSetting}
-              />
+              /> */}
-            </span>
+          </span>
-            <div
+        </div>
-              className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
+        <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient relative w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
-                disabled ? 'bg-gray-100' : 'bg-white'
+          <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
-              } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
+            <div className="relative flex h-full flex-1 md:flex-col">
-                disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
+              <div
-              } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
+                className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
-            >
+                  disabled ? 'bg-gray-100' : 'bg-white'
-              <EndpointMenu />
+                } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
-              <TextareaAutosize
+                  disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
-                tabIndex="0"
+                } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
-                autoFocus
+              >
-                ref={inputRef}
+                <EndpointMenu />
-                // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
+                <TextareaAutosize
-                rows="1"
+                  tabIndex="0"
-                value={disabled || isNotAppendable ? '' : text}
+                  autoFocus
-                onKeyUp={handleKeyUp}
+                  ref={inputRef}
-                onKeyDown={handleKeyDown}
+                  // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
-                onChange={changeHandler}
+                  rows="1"
-                onCompositionStart={handleCompositionStart}
+                  value={disabled || isNotAppendable ? '' : text}
-                onCompositionEnd={handleCompositionEnd}
+                  onKeyUp={handleKeyUp}
-                placeholder={getPlaceholderText()}
+                  onKeyDown={handleKeyDown}
-                disabled={disabled || isNotAppendable}
+                  onChange={changeHandler}
-                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-8"
+                  onCompositionStart={handleCompositionStart}
-              />
+                  onCompositionEnd={handleCompositionEnd}
-              <SubmitButton
+                  placeholder={getPlaceholderText()}
-                submitMessage={submitMessage}
+                  disabled={disabled || isNotAppendable}
-                disabled={disabled || isNotAppendable}
+                  className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-8"
-              />
+                />
-              {messages?.length && conversation?.model === 'sydney' ? (
+                <SubmitButton
-                <AdjustToneButton onClick={handleBingToneSetting} />
+                  submitMessage={submitMessage}
-              ) : null}
+                  handleStopGenerating={handleStopGenerating}
+                  disabled={disabled || isNotAppendable}
+                  isSubmitting={isSubmitting}
+                />
+                {/* {messages?.length && conversation?.model === 'sydney' ? (
+                  <AdjustToneButton onClick={handleBingToneSetting} />
+                ) : null} */}
+              </div>
             </div>
-          </div>
+          </form>
-        </form>
+          <Footer />
-        <Footer />
+        </div>
       </div>
     </>
   );

client/src/components/Messages/HoverButtons.jsx

@@ -1,26 +1,74 @@
 import React from 'react';
-// import Clipboard from '../svg/Clipboard';
+import Clipboard from '../svg/Clipboard';
 import EditIcon from '../svg/EditIcon';
+import RegenerateIcon from '../svg/RegenerateIcon';
+
+export default function HoverButtons({
+  isEditting,
+  enterEdit,
+  copyToClipboard,
+  conversation,
+  isSubmitting,
+  message,
+  regenerate
+}) {
+  const { endpoint, jailbreak = false } = conversation;
+
+  const branchingSupported =
+    // azureOpenAI, openAI, chatGPTBrowser support branching, so edit enabled
+    !!['azureOpenAI', 'openAI', 'chatGPTBrowser'].find(e => e === endpoint) ||
+    // Sydney in bingAI supports branching, so edit enabled
+    (endpoint === 'bingAI' && jailbreak);
+
+  const editEnabled =
+    !message?.error &&
+    message?.isCreatedByUser &&
+    !message?.searchResult &&
+    !isEditting &&
+    branchingSupported;
+
+  // for now, once branching is supported, regerate will be enabled
+  const regenerateEnabled =
+    !message?.error &&
+    !message?.isCreatedByUser &&
+    !message?.searchResult &&
+    !isEditting &&
+    !isSubmitting &&
+    branchingSupported;
 
-export default function HoverButtons({ visible, onClick, endpoint }) {
-  const enabled = !!['azureOpenAI', 'openAI', 'chatGPTBrowser'].find(e => e === endpoint);
-  console.log(enabled);
   return (
     <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
-      {visible && enabled ? (
+      {editEnabled ? (
-        <>
+        <button
-          <button
+          className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
-            className="resubmit-edit-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+          onClick={enterEdit}
-            onClick={onClick}
+          type="button"
-          >
+          title="edit"
-            {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> */}
+        >
-            <EditIcon />
+          {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> */}
-          </button>
+          <EditIcon />
-        </>
+        </button>
       ) : null}
-      {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400">
+      {regenerateEnabled ? (
-          <Clipboard />
+        <button
-        </button> */}
+          className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+          onClick={regenerate}
+          type="button"
+          title="regenerate"
+        >
+          {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> */}
+          <RegenerateIcon />
+        </button>
+      ) : null}
+
+      <button
+        className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+        onClick={copyToClipboard}
+        type="button"
+        title="copy to clipboard"
+      >
+        <Clipboard />
+      </button>
     </div>
   );
 }

client/src/components/Messages/Message.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useRecoilValue, useSetRecoilState, useResetRecoilState } from 'recoil';
+import copy from 'copy-to-clipboard';
 import SubRow from './Content/SubRow';
 import Content from './Content/Content';
 import MultiMessage from './MultiMessage';
@@ -29,7 +30,7 @@ export default function Message({
   const textEditor = useRef(null);
   const last = !message?.children?.length;
   const edit = message.messageId == currentEditId;
-  const { ask } = useMessageHandler();
+  const { ask, regenerate } = useMessageHandler();
   const { switchToConversation } = store.useConversation();
   const blinker = submitting && isSubmitting;
 
@@ -87,6 +88,14 @@ export default function Message({
     enterEdit(true);
   };
 
+  const regenerateMessage = () => {
+    if (!isSubmitting && !message?.isCreatedByUser) regenerate(message);
+  };
+
+  const copyToClipboard = () => {
+    copy(message?.text);
+  };
+
   const clickSearchResult = async () => {
     if (!searchResult) return;
     const convoResponse = await fetchById('convos', message.conversationId);
@@ -177,9 +186,13 @@ export default function Message({
               )}
             </div>
             <HoverButtons
-              endpoint={conversation?.endpoint}
+              isEditting={edit}
-              visible={!error && isCreatedByUser && !edit && !searchResult}
+              isSubmitting={isSubmitting}
-              onClick={() => enterEdit()}
+              message={message}
+              conversation={conversation}
+              enterEdit={() => enterEdit()}
+              regenerate={() => regenerateMessage()}
+              copyToClipboard={() => copyToClipboard()}
             />
             <SubRow subclasses="switch-container">
               <SiblingSwitch

client/src/components/svg/RegenerateIcon.jsx

@@ -3,20 +3,20 @@ import React from 'react';
 export default function Regenerate() {
   return (
     <svg
-    stroke="currentColor"
+      stroke="currentColor"
-    fill="none"
+      fill="none"
-    strokeWidth="1.5"
+      strokeWidth="2"
-    viewBox="0 0 24 24"
+      viewBox="0 0 24 24"
-    strokeLinecap="round"
+      strokeLinecap="round"
-    strokeLinejoin="round"
+      strokeLinejoin="round"
-    className="h-3 w-3"
+      className="h-4 w-4"
-    height="1em"
+      height="1em"
-    width="1em"
+      width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+      xmlns="http://www.w3.org/2000/svg"
-  >
+    >
-    <polyline points="1 4 1 10 7 10" />
+      <polyline points="1 4 1 10 7 10" />
-    <polyline points="23 20 23 14 17 14" />
+      <polyline points="23 20 23 14 17 14" />
-    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
+      <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
-  </svg>
+    </svg>
   );
 }

client/src/components/svg/StopGeneratingIcon.jsx

@@ -2,6 +2,26 @@ import React from 'react';
 
 export default function StopGeneratingIcon() {
   return (
-    <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2.5"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-3 w-3"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
+        ry="2"
+      ></rect>
+    </svg>
   );
 }

client/src/mobile.css

@@ -45,7 +45,7 @@
     display: none;
   }
 
-  .resubmit-edit-button {
+  .hover-button {
     display: block;
     visibility: visible;
   }