Function UpdateConversationModal

src/components/UpdateConversationModal.tsx:17–80

(props: Props)

}

const UpdateConversationModal = (props: Props) => {
  const { close, conversation } = props;
  const { t } = useTranslation();
  const conversationStore = useConversationStore();
  const [title, setTitle] = useState(conversation.title);
  const [assistantId, setAssistantId] = useState(conversation.assistantId);
  const allowSave = title !== "";
  const assistantItems = assistantList.map((assistant) => {
    return {
      value: assistant.id,
      label: assistant.name,
    };
  });
  const currentAssistant = assistantList.find((assistant) => assistant.id === assistantId);

  const handleSaveEdit = () => {
    const formatedTitle = title.trim();
    if (formatedTitle === "") {
      return;
    }

    conversationStore.updateConversation(conversation.id, {
      title: formatedTitle,
      assistantId: assistantId,
    });
    toast.success("Conversation updated");
    close();
  };

  return (
    <Modal title={t("conversation.update")} onClose={close}>
      <div className="w-full flex flex-col justify-start items-start mt-2">
        <label className="block text-sm font-medium text-gray-700 mb-1">{t("conversation.title")}</label>
        <TextField placeholder={t("conversation.conversation-title") || ""} value={title} onChange={(value) => setTitle(value)} />
      </div>
      <div className="w-full flex flex-col justify-start items-start mt-2">
        <label className="text-sm font-medium text-gray-700 mb-1 flex flex-row justify-start items-center">
          {t("assistant.self")} <BetaBadge />
        </label>
        <Select className="w-full" value={assistantId} itemList={assistantItems} onValueChange={(value) => setAssistantId(value)} />
        {currentAssistant && (
          <div className="w-full flex flex-col justify-start items-start">
            <p className="block text-sm text-gray-700 mt-2 mx-3">{currentAssistant.description}</p>
          </div>
        )}
        <a
          className="mt-1 mx-3 text-sm text-blue-600 underline hover:opacity-80"
          href="https://github.com/sqlchat/sqlchat/tree/main/assistants"
          target="_blank"
        >
          {t("assistant.create-your-bot")} <Icon.FiExternalLink className="inline-block -mt-0.5" />
        </a>
      </div>
      <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
        <button className="btn btn-outline" onClick={close}>
          {t("common.close")}
        </button>
        <button className="btn" disabled={!allowSave} onClick={handleSaveEdit}>