feat: add tags support

Author: L-a-r-t

README.md

@@ -1,24 +1,31 @@
 # ChatGPT to Notion
+
 ChatGPT to Notion brings the cleverness of ChatGPT into your favorite app!
 
 ## Overview
+
 For information about the extension itself more than the code behind it, check out [this notion page](https://theo-lartigau.notion.site/theo-lartigau/ChatGPT-to-Notion-af29d9538dca4493a15bb4ed0fde7f91). This extension was built using the [Plasmo framework](https://www.plasmo.com/) and Typescript. A simple Express server (hosted on a free Render webservice) that can be found on the "server" branch, it allows the secure long-term storage of Notion's access tokens.
 
 ## Motive
+
 While some tools already exist to save a webpage to Notion, and some going as far as allowing the user to save the page's contents, these solutions fall short when trying to save a conversation with ChatGPT. As such, providing a specialized extension to do this work efficiently felt natural.
 
 ## Usage
+
 On ChatGPT's page, you'll notice a new pin icon under each of its answers. You can use it to save specifically that answer and the related prompt to your Notion database of choice. If you want to save the whole discussion, you can do so from the extension popup.
 
 You may link as many databases with the extension as you need to, and you can then choose which database to save your discussion at saving time. If a page with the same title already exists in the database, the newly saved content will be appended to the end of said page.
 
 ## Contribution
+
 As this is my first time building a project that is open to contributions I will need a little time to sort things out and learn the best practices for great collaboration on GitHub. If you want to help (thanks!), please stay patient for a few days.
 
 ## Roadmap
+
 These are the things that I plan to work on at some point. It might be a few weeks before these get implemented as I’m currently quite busy, but I hope to have the following (ranked by priority) done in the near future:
 
-- [ ]  Saving to a page & not only to a database
-- [ ]  Customize the page title upon saving
-- [ ]  Add custom tags when saving
-- [x]  Upgrade backend (free Render webservice, fixed by setting up a keepalive loop)
+- [x] Add custom tags when saving
+- [ ] Customize the page title upon saving
+- [ ] Refactor the saving logic into a react hook
+- [ ] Saving to a page & not only to a database
+- [x] Upgrade backend (free Render webservice, fixed by setting up a keepalive loop)

assets/locales/en/messages.json

@@ -67,6 +67,10 @@
     "message": "Saved!",
     "description": "Success message when discussion is saved."
   },
+  "save_noTag": {
+    "message": "No tag",
+    "description": "No tag label."
+  },
   "settings_noLinkedDb": {
     "message": "No linked DB",
     "description": "No linked database message."
@@ -91,6 +95,26 @@
     "message": "Add an URL proprty to this DB inside Notion to use it",
     "description": "No URL property message."
   },
+  "dbsettings_loading": {
+    "message": "Loading database",
+    "description": "Loading database message."
+  },
+  "dbsettings_tagsProperty": {
+    "message": "Tags property",
+    "description": "Tags property label."
+  },
+  "dbsettings_tags": {
+    "message": "Tags",
+    "description": "Tags label."
+  },
+  "dbsettings_explainer": {
+    "message": "Upon saving a chat, you'll be prompted to choose one of these tags for the newly created Notion page",
+    "description": "Tags explainer."
+  },
+  "dbsettings_noTags": {
+    "message": "This database doesn't have any tags (select/multiselect properties)",
+    "description": "No tags message."
+  },
   "wrongpage_goTo": {
     "message": "Go to",
     "description": "Go to label."

assets/locales/fr/messages.json

@@ -67,6 +67,10 @@
     "message": "Enregistré !",
     "description": "Success message when discussion is saved."
   },
+  "save_noTag": {
+    "message": "Aucun",
+    "description": "No tag label."
+  },
   "settings_noLinkedDb": {
     "message": "Pas de BDD reliée",
     "description": "No linked database message."
@@ -91,6 +95,26 @@
     "message": "Ajoutez une propriété URL à cette BDD dans Notion pour l'utiliser",
     "description": "No URL property message."
   },
+  "dbsettings_loading": {
+    "message": "Chargement de la base de données",
+    "description": "Loading database message."
+  },
+  "dbsettings_tagsProperty": {
+    "message": "Propriété des mots clés",
+    "description": "Tags property label."
+  },
+  "dbsettings_tags": {
+    "message": "Mots clés",
+    "description": "Tags label."
+  },
+  "dbsettings_explainer": {
+    "message": "À l'enregistrement d'une discussion, vous pourrez choisir un de ces mots clés pour la page nouvellement créée",
+    "description": "Tags explainer."
+  },
+  "dbsettings_noTags": {
+    "message": "Cette BDD n'a pas de mots clés (propriétés sélection)",
+    "description": "No tags message."
+  },
   "wrongpage_goTo": {
     "message": "Allez sur le site de",
     "description": "Go to label."

src/api/saveAnswer.ts

@@ -1,8 +1,7 @@
 import { decompress } from "shrink-string"
 
 import getNotion from "~config/notion"
-import Notion from "~config/notion"
-import { generateBlocks } from "~utils/functions/notion"
+import { generateBlocks, generateTag } from "~utils/functions/notion"
 import type { StoredDatabase } from "~utils/types"
 
 // save new page to notion database
@@ -15,18 +14,20 @@ export const saveAnswer = async ({
 }: SaveAnswerParams) => {
   try {
     const notion = await getNotion()
-    const properties = database.properties
+    const { propertiesIds, tagPropertyIndex, tagIndex, tags } = database
     const decompressedAnswer = await decompress(answer)
     const decompressedPrompt = await decompress(prompt)
     const { answerBlocks, promptBlocks } = generateBlocks(
       decompressedPrompt,
       decompressedAnswer
     )
 
+    const tag = generateTag(tags[tagPropertyIndex], tagIndex)
+
     const searchRes = await notion.databases.query({
       database_id: database.id,
       filter: {
-        property: properties.title,
+        property: propertiesIds.title,
         title: {
           equals: title
         }
@@ -54,7 +55,7 @@ export const saveAnswer = async ({
         }
       },
       properties: {
-        [properties.title]: {
+        [propertiesIds.title]: {
           title: [
             {
               text: {
@@ -63,9 +64,10 @@ export const saveAnswer = async ({
             }
           ]
         },
-        [properties.url]: {
+        [propertiesIds.url]: {
           url
-        }
+        },
+        [tags[tagPropertyIndex].id]: tag
       },
       children: [
         {

src/api/saveChat.ts

@@ -1,5 +1,5 @@
 import getNotion from "~config/notion"
-import { generateBlocks } from "~utils/functions/notion"
+import { generateBlocks, generateTag } from "~utils/functions/notion"
 import type { StoredDatabase } from "~utils/types"
 
 // save new page to notion database
@@ -12,7 +12,7 @@ export const saveChat = async ({
 }: SaveChatParams) => {
   try {
     const notion = await getNotion()
-    const { properties } = database
+    const { propertiesIds, tags, tagIndex, tagPropertyIndex } = database
     const blocks = []
     for (let i = 0; i < prompts.length; i++) {
       const { answerBlocks, promptBlocks } = generateBlocks(
@@ -22,10 +22,12 @@ export const saveChat = async ({
       blocks.push(...promptBlocks, ...answerBlocks)
     }
 
+    const tag = generateTag(tags[tagPropertyIndex], tagIndex)
+
     const searchRes = await notion.databases.query({
       database_id: database.id,
       filter: {
-        property: properties.title,
+        property: propertiesIds.title,
         title: {
           equals: title
         }
@@ -52,7 +54,7 @@ export const saveChat = async ({
         }
       },
       properties: {
-        [properties.title]: {
+        [propertiesIds.title]: {
           title: [
             {
               text: {
@@ -61,9 +63,10 @@ export const saveChat = async ({
             }
           ]
         },
-        [properties.url]: {
+        [propertiesIds.url]: {
           url
-        }
+        },
+        [tags[tagPropertyIndex].id]: tag
       },
       children: [
         {

src/background/index.ts

@@ -5,6 +5,7 @@ import { getDatabase } from "~api/getDatabase"
 import { getToken } from "~api/getToken"
 import { saveAnswer } from "~api/saveAnswer"
 import { searchNotion } from "~api/search"
+import { formatDB } from "~utils/functions/notion"
 import type { StoredDatabase } from "~utils/types"
 
 // API calls that can be made from content scripts transit trough the background script
@@ -34,6 +35,11 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         })
       })
       break
+    case "getDB":
+      getDatabase(message.body.id).then((res) => {
+        sendResponse(res)
+      })
+      break
     default:
       return true
   }
@@ -51,7 +57,7 @@ const authenticate = async () => {
   if (_token) {
     console.log("token already exists")
     await storage.set("authenticated", true)
-    return
+    return true
   }
   // await session.set("token", null)
   // await storage.set("workspace_id", null)
@@ -63,7 +69,7 @@ const authenticate = async () => {
   ])
   if (!workspace_id || !user_id) {
     console.log("no ids found")
-    return
+    return false
   }
   const token = await getToken({
     workspace_id,
@@ -72,6 +78,7 @@ const authenticate = async () => {
   await session.set("token", token)
   await storage.set("authenticated", true)
   console.log("authenticated")
+  return true
 }
 
 const refreshIcons = async () => {
@@ -93,8 +100,36 @@ const refreshIcons = async () => {
   }
 }
 
+const refreshDatabases = async () => {
+  console.log("refreshing databases")
+  const storage = new Storage()
+  const databases = await storage.get<StoredDatabase[]>("databases")
+  if (!databases) return
+
+  const apiCalls = databases.map((db) => getDatabase(db.id))
+  const fullDatabases = await Promise.all(apiCalls)
+
+  let refreshedDatabases: StoredDatabase[] = []
+  for (let i = 0; i < fullDatabases.length; i++) {
+    const db = fullDatabases[i]
+    if (!db) continue
+    const formattedDB = formatDB(db)
+    if (!formattedDB) continue
+    refreshedDatabases.push(formattedDB)
+  }
+
+  const selectedDB = await storage.get<number>("selectedDB")
+  if (!!selectedDB && selectedDB >= refreshedDatabases.length) {
+    await storage.set("selectedDB", 0)
+  }
+  await storage.set("databases", refreshedDatabases)
+  await storage.set("refreshed", true)
+}
+
 const main = async () => {
-  await authenticate()
+  const authenticated = await authenticate()
+  if (!authenticated) return
+  await refreshDatabases()
   refreshIcons()
 }
 

src/common/components/Dropdown.tsx

@@ -11,10 +11,13 @@ export default function DropdownPopup({
   const pos = { up: "bottom-2", down: "top-2" }
 
   return (
-    <div>
+    <span className="w-fit">
       <Menu>
-        <Menu.Button className={className}>{children}</Menu.Button>
+        <Menu.Button className={`relative ${className}`}>
+          {children}
+        </Menu.Button>
         <Transition
+          className="relative"
           enter="transition duration-100 ease-out"
           enterFrom="transform scale-95 opacity-0"
           enterTo="transform scale-100 opacity-100"
@@ -23,7 +26,7 @@ export default function DropdownPopup({
           leaveTo="transform scale-95 opacity-0">
           <Menu.Items
             className={`absolute flex flex-col bg-white border border-gray-400 
-            rounded shadow ${pos[position]} -right-2 z-10`}>
+            rounded shadow ${pos[position]} -right-2 z-10 max-h-36 overflow-auto`}>
             {items.map((item, idx) => (
               <Menu.Item key={`${keysBase}${idx}`}>
                 {({ active }) => (
@@ -39,7 +42,7 @@ export default function DropdownPopup({
           </Menu.Items>
         </Transition>
       </Menu>
-    </div>
+    </span>
   )
 }