fix: edit title by default with autosave enabled

This also adds some basic style to the Conversation Settings tab to make it more visually consistent with the rest of the tabs. Closes #1
InterwebAlchemy · Mar 6, 2023 · 32e9110 · 32e9110
1 parent 64328de
commit 32e9110
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 43 deletions.
diff --git a/src/components/ChatTitle.tsx b/src/components/ChatTitle.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { Notice } from 'obsidian'
 
 import IconButton from './IconButton'
@@ -21,6 +21,8 @@ const ChatTitle = ({ loading = false }: ChatTitleProps): React.ReactElement => {
 
   const [editing, setEditing] = useState(false)
 
+  const inputRef = useRef<HTMLInputElement>(null)
+
   const onEdit = (event: React.FormEvent): void => {
     event.preventDefault()
 
@@ -44,10 +46,13 @@ const ChatTitle = ({ loading = false }: ChatTitleProps): React.ReactElement => {
             chat?.currentConversation()?.updateTitle(updatedTitle)
 
             setEditing(false)
+
             plugin.pauseAutosaving = false
           } else {
             // eslint-disable-next-line no-new
-            new Notice(`${updatedTitle} already exists in ${settings.conversationHistoryDirectory}`)
+            new Notice(
+              `${updatedTitle} already exists in ${settings.conversationHistoryDirectory}`
+            )
           }
         })
         .catch((error) => {
@@ -66,15 +71,53 @@ const ChatTitle = ({ loading = false }: ChatTitleProps): React.ReactElement => {
     }
   }, [title])
 
+  useEffect(() => {
+    if (
+      editing &&
+      settings.autosaveConversationHistory &&
+      inputRef.current !== null
+    ) {
+      inputRef.current.focus()
+    }
+  }, [editing, inputRef.current, settings.autosaveConversationHistory])
+
+  useEffect(() => {
+    if (settings.autosaveConversationHistory) {
+      plugin.pauseAutosaving = true
+
+      setEditing(true)
+    }
+  }, [settings.autosaveConversationHistory])
+
   return (
     <form
       className="ai-research-assistant__conversation__header"
-      onSubmit={editing ? onSave : onEdit}
-    >
+      onSubmit={editing ? onSave : onEdit}>
       {!editing ? (
-        <div className="ai-research-assistant__conversation__header__title">{title}</div>
+        <div className="ai-research-assistant__conversation__header__title">
+          {title}
+        </div>
       ) : (
-        <input type="text" defaultValue={title} onChange={onChange} />
+        <>
+          <label
+            htmlFor=""
+            className="ai-research-assistant__conversation__header__title__label">
+            Title
+          </label>
+          <input
+            type="text"
+            id="ai-research-assistant__conversation__title"
+            name="ai-research-assistant__conversation__title"
+            defaultValue={
+              settings.autosaveConversationHistory &&
+              title === DEFAULT_CONVERSATION_TITLE
+                ? ''
+                : title
+            }
+            onChange={onChange}
+            ref={inputRef}
+          />
+        </>
       )}
       <div className="ai-research-assistant__conversation__header__edit">
         <IconButton

diff --git a/src/components/ConversationSettings.tsx b/src/components/ConversationSettings.tsx
@@ -88,34 +88,36 @@ const ConversationSettings = ({
   }, [temperature])
 
   return (
-    <div className="ai-research-assistant__chat__conversation-settings">
-      <div className="ai-research-assistant__chat__conversation-settings__row">
-        <InputArea
-          type="text"
-          label="User Handle"
-          value={userHandle}
-          onChange={setUserHandle}
-        />
-        <InputArea
-          type="text"
-          label="Bot Handle"
-          value={botHandle}
-          onChange={setBotHandle}
-        />
-      </div>
-      <div className="ai-research-assistant__chat__conversation-settings__row">
-        <InputArea
-          type="text"
-          label="Maximum Tokens"
-          value={`${maxTokens}`}
-          onChange={changeMaxTokens}
-        />
-        <InputArea
-          type="text"
-          label="Temperature"
-          value={`${temperature}`}
-          onChange={changeTemperature}
-        />
+    <div className="ai-research-assistant__chat__conversation-settings__container">
+      <div className="ai-research-assistant__chat__conversation-settings">
+        <div className="ai-research-assistant__chat__conversation-settings__row">
+          <InputArea
+            type="text"
+            label="User Handle"
+            value={userHandle}
+            onChange={setUserHandle}
+          />
+          <InputArea
+            type="text"
+            label="Bot Handle"
+            value={botHandle}
+            onChange={setBotHandle}
+          />
+        </div>
+        <div className="ai-research-assistant__chat__conversation-settings__row">
+          <InputArea
+            type="text"
+            label="Maximum Tokens"
+            value={`${maxTokens}`}
+            onChange={changeMaxTokens}
+          />
+          <InputArea
+            type="text"
+            label="Temperature"
+            value={`${temperature}`}
+            onChange={changeTemperature}
+          />
+        </div>
       </div>
     </div>
   )

diff --git a/src/styles.css b/src/styles.css
@@ -68,10 +68,10 @@
   width: 100%;
   height: auto;
   font-size: var(--font-small);
-  padding: 0 25px 0 5px;
+  padding: 5px 25px 5px 5px;
   border: var(--input-border-width) solid var(--background-modifier-border);
   border-radius: 0;
-  margin: 0;
+  margin: 0 0 0 5px;
 }
 
 .ai-research-assistant__conversation__header__edit {
@@ -348,7 +348,8 @@
   color: var(--text-muted);
 }
 
-.ai-research-assistant__input-area__toolbar {
+.ai-research-assistant__input-area__toolbar,
+.ai-research-assistant__chat__conversation-settings__container {
   display: flex;
   position: absolute;
   width: 100%;
@@ -357,6 +358,14 @@
   color: var(--text-faint);
 }
 
+.ai-research-assistant__chat__conversation-settings__container {
+  height: 85%;
+  background: var(--background-modifier-form-field);
+  border: var(--input-border-width) solid var(--background-modifier-border);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
 .ai-research-assistant__input-area__toolbar--top {
   bottom: 100%;
 }

diff --git a/src/templates/summaryTemplate.ts b/src/templates/summaryTemplate.ts
@@ -47,17 +47,13 @@ ${
   typeof conversation?.preamble !== 'undefined' &&
   conversation.preamble !== '' &&
   conversation.preamble !== null
-    ? `
-
-## Preamble
+    ? `## Preamble
 
 The initial preamble used for this conversation was:
 
 \`\`\`
 ${conversation.preamble}
-\`\`\`
-
-`
+\`\`\``
     : ''
 }