Merge pull request #5 from InterwebAlchemy/feature/require-title

fix: edit title by default with autosave enabled
InterwebAlchemy · Mar 6, 2023 · 5ba1721 · 5ba1721
2 parents da5ae98 + 32e9110
commit 5ba1721
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}
-\`\`\`
-
-`
+\`\`\``
     : ''
 }