How to implement a predefined prompt button creating a new threadId, with useAssistant hook?

[ozanyusufoglu]

I'm confused how to use useAssistant() for a predefined prompt button.

I first tried only using append() but it requires and already existing threadID.

What I want is to start a thread with a button click and send the query with the click.

I tried using a form instead to imitate an input like the code below, but I always get the error at the bottom, on my terminal. What am I missing here? Isn't it enough to setInput to create a proper Message object on submitMessage?

export default function PromptButton({ className }) {
  const { threadId, status, submitMessage, setInput, input } = useAssistant({
    api: '/api/planner',
    threadId: todayLog?.threadId,
  });

  useEffect(() => {
    if (input == '') {
      setInput('predefined prompt');
    }
  }, []);

  useEffect(() => {
    if (status == 'awaiting_message') {
      if (!todayLog.threadId) {
        setTodayLog((prev) => ({
          ...prev,
          threadId: threadId,
        }));
      }
    }
  }, [status]);

  return (
    <form
      onSubmit={submitMessage}
      className={cn('z-[100000] border-2', className)}
    >
      <button type="submit">Predefined prompt</button>
    </form>
  );
}

The error on the terminal:

  request_id: 'req_b555c181c07a35bcf50f42115115794a',
  error: {
    message: "Unknown parameter: 'role'.",
    type: 'invalid_request_error',
    param: 'role',
    code: 'unknown_parameter'
  },
  code: 'unknown_parameter',
  param: 'role',
  type: 'invalid_request_error'
}