Fixed writer-rewriter, working

Author: gurveervirk

.gitignore

@@ -22,4 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-/old_working_build
+/old_working_build
+
+build.zip

public/background.js

@@ -23,7 +23,7 @@ const defaultSettings = {
       tone: "as-is",
       length: "as-is",
       format: "as-is",
-      context: "",
+      context: "I am.",
   },
   write: {
       available: {
@@ -34,7 +34,7 @@ const defaultSettings = {
       tone: "formal",
       length: "medium",
       format: "plain-text",
-      context: "",
+      context: "I am.",
   },
   detect: {
       languageMapping: {

src/App.js

@@ -252,13 +252,16 @@ const AppContent = ({ isGenerating, setIsGenerating, isBookmarking, setIsBookmar
 
   const handleTriggerRewrite = async (message, messageID = null, messageType = null) => {
     console.log("handleTriggerRewrite message received");
+    console.log("messageID: ", messageID);
+    console.log("messageType: ", messageType);
+    console.log("message: ", message);
     setIsGenerating(true);
     navigate('/output');
     try {
-      const result = await handleRewrite(message.text);
+      const result = await handleRewrite(message);
       const outputData = {
         id: messageID || uuidv4(),
-        input: message.text,
+        input: message,
         text: result,
         timestamp: new Date().toISOString(),
         type: messageType || 'Composition'

src/api/rewriteHandler.js

@@ -28,6 +28,7 @@ const createReWriter = async () => {
 
 // Function to prompt the model and get a response
 const promptRewriteModel = async (prompt) => {
+  console.log("Prompt: ", prompt);
   if (!prompt) throw new Error("Prompt is required");
 
   if (!window.ai || !window.ai.rewriter) {
@@ -57,6 +58,7 @@ const promptRewriteModel = async (prompt) => {
 // Handler function for external use
 export const handleRewrite = async (prompt) => {
   try {
+    console.log("Prompt: ", prompt);
     const result = await promptRewriteModel(prompt);
     return result.sanitizedResponse;
   } catch (error) {

src/api/writeHandler.js

@@ -13,11 +13,16 @@ export const createWriterSession = async (tone, length, format, context) => {
 export const handleWrite = async (prompt, chosenTone = null, chosenLength = null) => {
   if (!prompt) throw new Error("Prompt is required");
 
-  const storedSettings = await loadSettings();
-  const { tone, length, format, context } = storedSettings.write;
+  try {
+    const storedSettings = await loadSettings();
+    const { tone, length, format, context } = storedSettings.write;
 
-  await createWriterSession(chosenTone === null ? tone : chosenTone, chosenLength === null ? length : chosenLength, format, context);
+    await createWriterSession(chosenTone === null ? tone : chosenTone, chosenLength === null ? length : chosenLength, format, context);
 
-  const fullResponse = await writer.write(prompt);
-  return DOMPurify.sanitize(marked.parse(fullResponse));
+    const fullResponse = await writer.write(prompt);
+    return DOMPurify.sanitize(marked.parse(fullResponse));
+  } catch (error) {
+    console.error("Error during writing process:", error);
+    throw new Error("Failed to process the writing request.");
+  }
 };

src/components/ui/OutputBox.js

@@ -13,7 +13,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import LoadingMessage from './LoadingMessage';
 
 const OutputBox = ({ handleTriggerRewrite, isGenerating }) => {
-  const [copied, setCopied] = useState(false);
+  const [copied, setCopied] = useState({});
   const [selectedTabs, setSelectedTabs] = useState([]);
   const [outputs, setOutputs] = useState([]);
   const [error, setError] = useState(null);
@@ -48,13 +48,16 @@ const OutputBox = ({ handleTriggerRewrite, isGenerating }) => {
     }
   }, [isGenerating]);
 
-  const handleCopy = (text) => {
+  const handleCopy = (text, id) => {
+    // Clean text before copying
+    text = text.replace(/<[^>]*>?/gm, '');
     navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    setCopied((prevCopied) => ({ ...prevCopied, [id]: true }));
+    setTimeout(() => setCopied((prevCopied) => ({ ...prevCopied, [id]: false })), 2000);
   };
 
   const handleRewrite = (text, id, type) => {
+    console.log('Rewrite:', text, id, type);
     handleTriggerRewrite(text, id, type);
   };
 
@@ -99,19 +102,46 @@ const OutputBox = ({ handleTriggerRewrite, isGenerating }) => {
               }}
             >
               <ListItemText primary={query} />
-              <IconButton
-                edge="end"
-                aria-label="search"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleSearch(query);
-                }}
-                style={{
-                  color: '#1A73E8',
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-end',
+                  gap: 1,
                 }}
               >
-                <SearchIcon />
-              </IconButton>
+                <Tooltip title="Search">
+                  <IconButton
+                    edge="end"
+                    aria-label="search"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleSearch(query);
+                    }}
+                    style={{
+                      color: '#1A73E8',
+                    }}
+                  >
+                    <SearchIcon />
+                  </IconButton>
+                </Tooltip>
+                {/* <Tooltip title="Copy to clipboard">
+                  <IconButton
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleCopy(output.text, output.id);
+                    }}
+                    sx={{
+                      color: copied[output.id] ? 'green' : '#1A73E8',
+                      padding: 0.5,
+                      transition: 'color 0.3s',
+                    }}
+                    aria-label="copy"
+                  >
+                    {copied[output.id] ? <CheckIcon fontSize='small'/> : <ContentCopyIcon fontSize='small'/>}
+                  </IconButton>
+                </Tooltip> */}
+              </Box>
             </ListItem>
           ))}
         </List>
@@ -141,7 +171,7 @@ const OutputBox = ({ handleTriggerRewrite, isGenerating }) => {
             width: '100%',
             boxShadow: 3,
             border: '2px solid #1A73E8',
-            textAlign: 'center',
+            // textAlign: 'center',
           }}
         >
           <Box
@@ -183,39 +213,49 @@ const OutputBox = ({ handleTriggerRewrite, isGenerating }) => {
                   <InfoIcon fontSize='small'/>
                 </IconButton>
               </Tooltip>
-              <IconButton
-                onClick={() => handleCopy(output.text)}
-                sx={{
-                  color: copied ? 'green' : '#1A73E8',
-                  padding: 0.5,
-                  transition: 'color 0.3s',
-                }}
-                aria-label="copy"
-              >
-                {copied ? <CheckIcon fontSize='small'/> : <ContentCopyIcon fontSize='small'/>}
-              </IconButton>
-              <IconButton
-                onClick={() => handleRewrite(output.text, output.id, output.type)}
-                sx={{
-                  color: '#1A73E8',
-                  padding: 0.5,
-                  '&:hover': { color: '#1558B0' },
-                }}
-                aria-label="rewrite"
-              >
-                <EditIcon fontSize='small'/>
-              </IconButton>
-              <IconButton
-                onClick={() => handleDelete(output.id)}
-                sx={{
-                  color: '#1A73E8',
-                  padding: 0.5,
-                  '&:hover': { color: 'red' },
-                }}
-                aria-label="delete"
-              >
-                <DeleteIcon fontSize='small'/>
-              </IconButton>
+            {output.type !== 'Search' && (
+              <>
+                <Tooltip title="Copy to clipboard">
+                  <IconButton
+                    onClick={() => handleCopy(output.text, output.id)}
+                    sx={{
+                      color: copied[output.id] ? 'green' : '#1A73E8',
+                      padding: 0.5,
+                      transition: 'color 0.3s',
+                    }}
+                    aria-label="copy"
+                  >
+                    {copied[output.id] ? <CheckIcon fontSize='small'/> : <ContentCopyIcon fontSize='small'/>}
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Rewrite">
+                  <IconButton
+                    onClick={() => handleRewrite(output.text, output.id, output.type)}
+                    sx={{
+                      color: '#1A73E8',
+                      padding: 0.5,
+                      '&:hover': { color: '#1558B0' },
+                    }}
+                    aria-label="rewrite"
+                  >
+                    <EditIcon fontSize='small'/>
+                  </IconButton>
+                </Tooltip>
+              </>
+            )}
+              <Tooltip title="Delete">
+                <IconButton
+                  onClick={() => handleDelete(output.id)}
+                  sx={{
+                    color: '#1A73E8',
+                    padding: 0.5,
+                    '&:hover': { color: 'red' },
+                  }}
+                  aria-label="delete"
+                >
+                  <DeleteIcon fontSize='small'/>
+                </IconButton>
+              </Tooltip>
             </Box>
           </Box>
           {content}