From 05bc8d0fe9fc5f455260a63a7c9983455567c5de Mon Sep 17 00:00:00 2001
From: AllierByron <99301366+AllierByron@users.noreply.github.com>
Date: Mon, 20 Nov 2023 11:31:08 -0600
Subject: [PATCH] Buttons affected for visual aid added (#21)

* visual indicative for active  mode added (colored buttons), copy button added

* copy on clipboard function extracted from onClick prop

---------

Co-authored-by: Byron <212220367@soy.utj.edu.mx>
---
 src/app/components/Model.tsx   | 58 +++++++++++++++++++++++-----------
 src/app/components/Result.tsx  | 24 ++++++++++++--
 src/app/components/ToolBar.tsx | 15 +++++----
 3 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/src/app/components/Model.tsx b/src/app/components/Model.tsx
index 19bbf32..4c7a46c 100644
--- a/src/app/components/Model.tsx
+++ b/src/app/components/Model.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import React, { useState } from 'react';
 import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs';
 import 'prismjs/components/prism-typescript';
@@ -13,23 +14,44 @@ interface ModelTypes {
 }
 
 // model are the inputs from the user, these are part of the prompt
-export const Model = ({ userInput, updateUserInput, disabled }: ModelTypes) => (
-    <div className='flex flex-col w-[50%] h-full grow border border-gray-700'>
-        <h1 className='basis-[2%] ml-2'>Model</h1>
-        <div className='basis-[98%] overflow-auto bg-white text-black whitespace-pre-wrap grow font-mono'>
-            <Editor
-                value={userInput}
-                highlight={(userInputWritten) => highlight(userInputWritten, languages.tsx, 'tsx')}
-                onValueChange={(userInputWritten) => updateUserInput(userInputWritten)}
-                className='min-h-full'
-                preClassName='!break-all '
-                textareaClassName='!break-all '
-                padding={7}
-                disabled={disabled}
-                placeholder='Input some code...'
-            />
+export const Model = ({ userInput, updateUserInput, disabled }: ModelTypes) => {
+    const [copyText, onCopyText] = useState('Copy to clipboard');
+
+    const onCopyClick = () => {
+        navigator.clipboard.writeText(userInput);
+        onCopyText('Copied!');
+        setTimeout(() => {
+            onCopyText('Copy to clipboard');
+        }, 2000);
+    };
+
+    return (
+        <div className='flex flex-col w-[50%] h-full grow border border-gray-700'>
+            <div className='flex flex-row justify-between'>
+                <h1 className='basis-[2%] ml-2'>Model</h1>
+                <button
+                    className={`mr-4 px-2 py-0 text-xs ${copyText === 'Copied!' ? ' text-yellow-300' : ''}`}
+                    onClick={onCopyClick}
+                    disabled={copyText === 'Copied!'}
+                >
+                    {copyText}
+                </button>
+            </div>
+            <div className='basis-[98%] overflow-auto bg-white text-black whitespace-pre-wrap grow font-mono'>
+                <Editor
+                    value={userInput}
+                    highlight={(userInputWritten) => highlight(userInputWritten, languages.tsx, 'tsx')}
+                    onValueChange={(userInputWritten) => updateUserInput(userInputWritten)}
+                    className='min-h-full'
+                    preClassName='!break-all '
+                    textareaClassName='!break-all '
+                    padding={7}
+                    disabled={disabled}
+                    placeholder='Input some code...'
+                />
+            </div>
         </div>
-    </div>
-);
+    );
+};
 
 export default Model;
diff --git a/src/app/components/Result.tsx b/src/app/components/Result.tsx
index 6d977b5..de0ce60 100644
--- a/src/app/components/Result.tsx
+++ b/src/app/components/Result.tsx
@@ -1,4 +1,5 @@
-import { useEffect } from 'react';
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { useEffect, useState } from 'react';
 import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs';
 import 'prismjs/components/prism-typescript';
@@ -17,6 +18,8 @@ interface ResultTypes {
 
 // results are GPT responses exemplified by the user
 export const Result = ({ data, userResults, updateUserResults, disabled, isLoading, modeUp }: ResultTypes) => {
+    const [copyText, onCopyText] = useState('Copy to clipboard');
+
     useEffect(() => {
         if (typeof data === 'string') {
             updateUserResults(data);
@@ -27,9 +30,26 @@ export const Result = ({ data, userResults, updateUserResults, disabled, isLoadi
 
     const placeHolderText = modeUp ? 'Field deactivated, input code in model to review it' : 'Input a result...';
 
+    const onCopyClick = () => {
+        navigator.clipboard.writeText(userResults);
+        onCopyText('Copied!');
+        setTimeout(() => {
+            onCopyText('Copy to clipboard');
+        }, 2000);
+    };
+
     return (
         <div className='flex flex-col w-[50%] h-full grow border border-gray-700'>
-            <h1 className='basis-[2%] ml-2'>Result</h1>
+            <div className='flex flex-row justify-between'>
+                <h1 className='basis-[2%] ml-2'>Result</h1>
+                <button
+                    className={`mr-4 px-2 py-0 text-xs ${copyText === 'Copied!' ? ' text-yellow-300' : ''}`}
+                    onClick={onCopyClick}
+                    disabled={copyText === 'Copied!'}
+                >
+                    {copyText}
+                </button>
+            </div>
             <div className='basis-[98%] overflow-auto font-mono'>
                 <Editor
                     value={userResults}
diff --git a/src/app/components/ToolBar.tsx b/src/app/components/ToolBar.tsx
index 74a14fc..122f2ae 100644
--- a/src/app/components/ToolBar.tsx
+++ b/src/app/components/ToolBar.tsx
@@ -42,9 +42,6 @@ export const ToolBar = ({ isLoading, send, changeModeUp, modeUp }: toolBarInter)
     const classNameForSend = disabledSendRequest ? ' text-gray-400' : ' hover:bg-yellow-800';
     const classNameForButton = isLoading ? ' text-gray-400' : ' hover:bg-red-900';
 
-    console.log('disabled:', disabledSendRequest);
-    console.log('modeUp:', modeUp);
-
     const clickedAdd = () => {
         if (userInput.trim() !== '' && userResults.trim() !== '') {
             updateUserInputArr({ input: userInput, result: userResults });
@@ -104,7 +101,9 @@ export const ToolBar = ({ isLoading, send, changeModeUp, modeUp }: toolBarInter)
                     <h4>Input mode</h4>
                     <div className='flex flex-row gap-4'>
                         <button
-                            className='px-3 rounded hover:bg-yellow-100 hover:text-black'
+                            className={`px-3 rounded ${
+                                mode && !modeUp ? ' bg-yellow-200 text-black ' : ''
+                            } hover:bg-yellow-100 hover:text-black`}
                             type='button'
                             onClick={() => {
                                 onModeClick(true);
@@ -115,7 +114,9 @@ export const ToolBar = ({ isLoading, send, changeModeUp, modeUp }: toolBarInter)
                             Example
                         </button>
                         <button
-                            className='px-3 rounded hover:bg-blue-200 hover:text-black'
+                            className={`px-3 rounded ${
+                                !mode && !modeUp ? ' bg-blue-200 text-black ' : ''
+                            } hover:bg-blue-100 hover:text-black`}
                             type='button'
                             onClick={() => {
                                 onModeClick(false);
@@ -126,7 +127,9 @@ export const ToolBar = ({ isLoading, send, changeModeUp, modeUp }: toolBarInter)
                             Request
                         </button>
                         <button
-                            className='px-3 rounded hover:bg-pink-200 hover:text-black'
+                            className={`px-3 rounded ${
+                                !mode && modeUp ? ' bg-pink-200 text-black ' : ''
+                            } hover:bg-pink-100 hover:text-black`}
                             type='button'
                             onClick={() => {
                                 onModeClick(false);