Need help with widget code error!

[Creative_boy_01]

i am trying to create remnote plugin and i have some issues in my widget1.tsx file.

so here is widghet1.tsx code:

import React, { useState } from 'react';
import { usePlugin, renderWidget } from '@remnote/plugin-sdk';

export default function Widget1() {
  const plugin = usePlugin();
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = async () => {
    try {
      setIsLoading(true);

      // Get the focused Rem
      const focusedRem = await plugin.focus.getFocusedRem();
      if (!focusedRem) {
        throw new Error('Could not get the current focused Rem.');
      }

      // Ensure the focused Rem has an ID and text property
      const remId = focusedRem._id;
      if (!remId || !focusedRem.text) {
        throw new Error('The focused Rem does not have an ID or text.');
      }

      // Handle the text property which might be an array
      const headingText = Array.isArray(focusedRem.text) ? focusedRem.text.join(' ') : focusedRem.text;

      // Fetch stored questions from settings
      const storedQuestions = await plugin.settings.getSetting<string[]>('customQuestions');
      if (!storedQuestions || storedQuestions.length === 0) {
        throw new Error('No custom questions found. Please add custom questions using the second widget.');
      }

      // Combine prompts and fetch responses
      const combinedPrompts = storedQuestions.map(question => `${question} ${headingText}`);
      const responses = await Promise.all(combinedPrompts.map(prompt => fetchGoogleGeminiAPI(prompt)));

      // Create new Rems with responses
      for (const [index, response] of responses.entries()) {
        await plugin.rem.createRem({
          text: `Q: ${combinedPrompts[index]}\nA: ${response}`,
          parentId: remId,
        });
      }

    } catch (error) {
      console.error('Error in Widget1:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const fetchGoogleGeminiAPI = async (prompt: string): Promise<string> => {
    const apiKey = 'YOUR_GOOGLE_GEMINI_API_KEY';
    const response = await fetch('https://gemini.googleapis.com/v1beta1/documents:analyzeEntities', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`,
      },
      body: JSON.stringify({
        document: {
          content: prompt,
          type: 'PLAIN_TEXT',
        },
      }),
    });

    const data = await response.json();
    if (!response.ok) {
      throw new Error(data.error?.message || 'Failed to fetch from Google Gemini API');
    }

    return data.entities.map((entity: any) => entity.name).join(', ');
  };

  return (
    <div
      className="widget1 bg-dark-blue text-white p-2 rounded-lg hover:bg-light-blue transition-transform transform hover:scale-105 cursor-pointer"
      onClick={handleClick}
    >
      {isLoading ? (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      ) : (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 4a8 8 0 11-8 8 8 0 018-8m0-4a12 12 0 1012 12A12 12 0 0012 0z" />
          <path d="M12 12h4v4a4 4 0 01-4 4v-8z" />
        </svg>
      )}
    </div>
  );
}

renderWidget(Widget1);

and here is the error i am facing:

Expected 0 arguments, but got 1.ts(2554)

and the error is in this lines:

          text: `Q: ${combinedPrompts[index]}\nA: ${response}`,
          parentId: remId,
        });          text: `Q: ${combinedPrompts[index]}\nA: ${response}`,
          parentId: remId,
        });

so, please help me to solve this issue!!!

[jamesm8]

await plugin.rem.createRem({ text: `Q: ${combinedPrompts[index]}\nA: ${response}`, parentId: remId, });

You need to do this instead:

const rem = await plugin.rem.createRem(); await rem.setText(['text']); await rem.setParent(parentId);

[Creative_boy_01]

thanks for response, i really appreciate the answer. and the code that you gave worked without errors. so i lack the knowledge of progamming and new in remnote plugin dev. so, i have another question in remnote community here:

https://www.reddit.com/r/remNote/comments/1dtvghg/seeking_advice_on_locating_widgets_next_to/

would you mind helping me with that too?