How to 'restart' the chat properly?

[gasatrya]

I am building a text generator using the useChat but I want to 'restart' the chat every time a user hits the submit button. I tried the setMessages([]) and assign an empty array, but it only removes the response. How to restart it properly, please help? Here's a live url https://outlineai.vercel.app/

'use client'

import { useEffect, useState } from 'react'
import { useChat } from 'ai/react'
import ReactMarkdown from 'react-markdown'

export default function Home() {
  const [topic, setTopic] = useState('')
  const [count, setCount] = useState(0)

  const { setMessages, messages, handleInputChange, handleSubmit } = useChat({
    body: {
      topic,
    },
    onFinish: () => {
      setCount(1)
    },
  })

  const onChange = e => {
    setTopic(e.target.value)
    handleInputChange(e)
  }

  const onSubmit = e => {
    handleSubmit(e)
    setTopic('')
    if (count !== 0) {
      setCount(0)
      setMessages([])
    }
  }

  return (
    <main className='max-w-2xl mx-auto my-5'>
      <div>
        <form className='bg-white p-8 rounded shadow mb-5' onSubmit={onSubmit}>
          <div className='mb-3'>
            <label htmlFor='topic' className='font-bold'>
              Post Topic
            </label>
            <p className='text-sm text-slate-500 mb-2'>
              Describe in a few words what post topic you want to write about.
            </p>
            <input
              type='text'
              className='text-black block w-full rounded placeholder:text-slate-400 border-slate-300 shadow-sm focus:border-teal-500 focus:ring focus:ring-teal-500 focus:ring-opacity-50 disabled:bg-slate-100 disabled:cursor-not-allowed'
              value={topic}
              onChange={onChange}
              id='topic'
              placeholder='e.g. how to make money online'
              // disabled={count === 1}
            />
          </div>
          <button type='submit' className='text-sm px-4 py-2 bg-teal-500 text-white font-semibold rounded'>
            Generate Outline
          </button>
        </form>
        {messages && (
          <div className='bg-white p-8 rounded shadow w-full'>
            <h2 className='text-xl font-bold'>Result</h2>
            <div className='prose'>
              {messages.map((m, index) => {
                if (m.role === 'user') {
                  return (
                    <div key={index}>
                      <strong>Topic:</strong> {m.content}
                    </div>
                  )
                } else {
                  return (
                    <div key={index}>
                      <ReactMarkdown>{m.content}</ReactMarkdown>
                    </div>
                  )
                }
              })}
            </div>
          </div>
        )}
      </div>
    </main>
  )
}

[benjaminbascary]

Find any solution yet? I was searching a way to clear the messages state with the setMessages function built in the useChat hook but with no look

[lgrammel]

@gasatrya @benjaminbascary check out this example:

'use client';

import { useChat } from 'ai/react';
import { useState } from 'react';

export default function Chat() {
  const [chatId, setChatId] = useState<number | undefined>(undefined);
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    id: chatId?.toString(),
  });

  const handleReset = () => {
    setChatId(chatId => (chatId ?? 0) + 1);
  };

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.length > 0
        ? messages.map(m => (
            <div key={m.id} className="whitespace-pre-wrap">
              {m.role === 'user' ? 'User: ' : 'AI: '}
              {m.content}
            </div>
          ))
        : null}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
        <button
          type="button"
          className="fixed bottom-0 w-20 p-2 mb-8 text-white bg-blue-500 rounded hover:bg-blue-700"
          onClick={handleReset}
          style={{ transform: 'translateY(100%)' }}
        >
          Reset
        </button>
      </form>
    </div>
  );
}

[wangrui6]

How will it be different if the user is allowed to click the button to stop and then click again to re-generate new chat output. Does the above code still work?

[martinjo]

Is the only way to regenerate properly to start a chat with a new id? I’m really struggling with this (though using svelte). Was really expecting a setMessages() + reload call to work, but no 😢