Increased KY Client Timeout to 20s, Show Source URL in AI Generated Blocks

.changeset/two-penguins-flow.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+KY Client timeout to 20s

apps/extension/src/Components/AIPreview.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 
 import { NodeEditorContent } from '@mexit/core'
-import { AIPreview, useAIOptions } from '@mexit/shared'
+import { addOriginToBlocks, AIPreview, useAIOptions } from '@mexit/shared'
 
 import { generateEditorPluginsWithComponents } from '../Editor/plugins'
 import { useSaveChanges } from '../Hooks/useSaveChanges'
@@ -14,7 +14,8 @@ const AIPreviewContainer = () => {
   const { getAIMenuItems } = useAIOptions()
 
   const handleOnInsert = (content: NodeEditorContent, nodeId: string) => {
-    appendAndSave({ nodeid: nodeId, content })
+    const contentWithSource = addOriginToBlocks(content, window.location.href)
+    appendAndSave({ nodeid: nodeId, content: contentWithSource })
   }
 
   const plugins = useMemo(

apps/extension/src/Components/InternalEvents.tsx

@@ -6,14 +6,7 @@ import * as Sentry from '@sentry/react'
 import mixpanel from 'mixpanel-browser'
 import Highlighter from 'web-highlighter'
 
-import {
-  API_BASE_URLS,
-  FloatingElementType,
-  mog,
-  useFloatingStore,
-  useHighlightStore,
-  useHistoryStore
-} from '@mexit/core'
+import { API_BASE_URLS, FloatingElementType, useFloatingStore, useHighlightStore, useHistoryStore } from '@mexit/core'
 import { getScrollbarWidth, isInputField } from '@mexit/shared'
 
 import { useEditorStore } from '../Hooks/useEditorStore'
@@ -239,7 +232,7 @@ function handleHighlighter() {
 
       highlightsOfUrl.forEach((highlight) => {
         const { startMeta, endMeta, text, id } = highlight.properties.saveableRange
-        mog('check', { id, highlighedIds })
+        // mog('check', { id, highlighedIds })
 
         if (!highlighedIds.includes(id)) {
           highlighter.fromStore(startMeta, endMeta, text, highlight.entityId)

apps/extension/src/Hooks/useSaveChanges.ts

@@ -15,6 +15,7 @@ import {
   useDataStore,
   useFloatingStore,
   useHighlightStore,
+  useMetadataStore,
   useRecentsStore
 } from '@mexit/core'
 
@@ -53,7 +54,7 @@ export function useSaveChanges() {
 
   const setContent = useContentStore((s) => s.setContent)
   const appendContent = useContentStore((s) => s.appendContent)
-
+  const updateMetadata = useMetadataStore((s) => s.updateMetadata)
   const addRecent = useRecentsStore((store) => store.addRecent)
   const addHighlight = useHighlightStore((s) => s.addHighlight)
   const { isSharedNode } = useNodes()
@@ -262,21 +263,21 @@ export function useSaveChanges() {
     setSelection(undefined)
     addRecent(node.nodeid)
     setActiveItem()
-    // mog('Request and things', { request, node, nodeContent, content })
-    // TODO: Merge this with the savit request call. DRY
+
     const response = await chrome.runtime.sendMessage(request)
 
     const { message, error } = response
 
     if (error && notification) {
       toast.error('An Error Occured. Please try again.')
     } else {
-      // mog('Response and things', { response })
-      const bulkCreateRequest = request.subType === 'BULK_CREATE_NODES'
-      const nodeid = !bulkCreateRequest ? message.id : message.node.id
-      const content = message.content ?? request.body.content
+      const title = message?.title ?? message?.node?.title
+      const content = message?.content ?? request?.body?.content
+
       appendContent(node.nodeid, content)
-      const title = !bulkCreateRequest ? message.title : message.node.title
+
+      // * TODO: Pick updatedAt from response
+      updateMetadata('notes', node.nodeid, { updatedAt: Date.now() })
       updateBlocks({
         id: node.nodeid,
         contents: content,

apps/extension/src/Sync/index.ts

@@ -1,4 +1,16 @@
-import { BroadcastSyncedChannel, mog, useContentStore, useDataStore, useHighlightStore, useLayoutStore , useLinkStore,useRecentsStore, useReminderStore, useSnippetStore  } from '@mexit/core'
+import {
+  BroadcastSyncedChannel,
+  mog,
+  useContentStore,
+  useDataStore,
+  useHighlightStore,
+  useLayoutStore,
+  useLinkStore,
+  useMetadataStore,
+  useRecentsStore,
+  useReminderStore,
+  useSnippetStore
+} from '@mexit/core'
 
 import { childIframe } from './iframeConnector'
 import { MessageType, UnhandledRequestsByExtension } from './messageHandler'
@@ -36,6 +48,15 @@ const messagePassing = () => {
     onStateChange
   )
 
+  storeChangeHandler(
+    useMetadataStore,
+    {
+      name: BroadcastSyncedChannel.METADATA,
+      sync: [{ field: 'metadata' }]
+    },
+    onStateChange
+  )
+
   storeChangeHandler(
     useSnippetStore,
     {

apps/extension/src/Utils/fetchClient.ts

@@ -75,6 +75,7 @@ const client = ky.create({
     beforeRequest: [attachTokenToRequest],
     afterResponse: [refreshTokenHook]
   },
+  timeout: 20000,
   retry: 0
 })
 

apps/webapp/src/Components/Editor/BlockInfo/BlockInfo.index.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'
 
 import message2Line from '@iconify/icons-ri/message-2-line'
 import { Icon } from '@iconify/react'
-import { findNodePath, isSelectionExpanded } from '@udecode/plate'
+import { findNodePath, isSelectionExpanded, isUrl } from '@udecode/plate'
 import { nanoid } from 'nanoid'
 import { useFocused, useSelected } from 'slate-react'
 
@@ -40,7 +40,7 @@ export const BlockInfo = (props: any) => {
   // Whether the element is inline
   // TODO: Find a way to only show this for first level blocks only
   const isInline = useMemo(() => attributes['data-slate-inline'], [attributes])
-  const anal = useAnalysisStore((state) => state.analysis)
+  const analysis = useAnalysisStore((state) => state.analysis)
   // const isTable = useMemo(() => attributes['data-slate-table'], [attributes])
   const { getCommentsOfBlock, addComment, deleteComment } = useComments()
   const { getReactionsOfBlock, getReactionDetails, addReaction, deleteReaction } = useReactions()
@@ -66,13 +66,14 @@ export const BlockInfo = (props: any) => {
 
   // Whether to show source info
   const showSource = useMemo(() => {
-    if (anal?.displayBlocksWithHighlight) {
-      if (anal?.displayBlocksWithHighlight?.includes(element?.id)) {
+    if (analysis?.displayBlocksWithHighlight) {
+      if (analysis?.displayBlocksWithHighlight?.includes(element?.id)) {
         return true
       }
     }
-    return false
-  }, [anal?.displayBlocksWithHighlight, element?.id])
+
+    return isUrl(element?.blockMeta?.origin)
+  }, [analysis?.displayBlocksWithHighlight, element?.id])
 
   // Does the element have sourceUrl
   const hasAssociatedHighlight = useMemo(
@@ -82,13 +83,13 @@ export const BlockInfo = (props: any) => {
 
   // Source url
   const sourceURL = useMemo(() => {
-    if (!hasAssociatedHighlight) {
-      return undefined
-    } else {
+    if (hasAssociatedHighlight) {
       // Extract the source from the highlight entity
       const highlightId = element?.metadata?.elementMetadata?.id
       const highlight = getHighlight(highlightId)
       return highlight?.properties?.sourceUrl
+    } else if (isUrl(element?.blockMeta?.origin)) {
+      return element?.blockMeta?.origin
     }
   }, [element, hasAssociatedHighlight])
 

apps/webapp/src/Components/Editor/Plateless.tsx

@@ -292,7 +292,7 @@ RenderPlateless.displayName = 'RenderPlateless'
  */
 const Plateless = ({ content, multiline = false }: PlatelessProps) => {
   const typeMap = useTypeMap(multiline)
-  if (!content.length) {
+  if (!content?.length) {
     return <span>Loading...</span>
   }
   return (

apps/webapp/src/Components/Modals/DeleteSpaceModal/MoveToSpace.tsx

@@ -44,7 +44,7 @@ const MoveToSpace: React.FC<MoveToSpaceProps> = ({ selected, onChange, currentSp
   }
 
   return (
-    <MoveSpaceSection>
+    <MoveSpaceSection id="space-selector">
       <Group>
         <input type="checkbox" checked={isSelectorVisible} onChange={onMoveToSpaceSelect} />
         Move Notes to Another Space
@@ -53,6 +53,8 @@ const MoveToSpace: React.FC<MoveToSpaceProps> = ({ selected, onChange, currentSp
         <Menu
           key="wd-mexit-space-selector"
           border
+          noHover
+          root={document.getElementById('space-selector')}
           handleKeyDown={handleKeyDown}
           values={
             <GenericFlex>

apps/webapp/src/Views/Tag.tsx

@@ -155,12 +155,15 @@ const Tag = () => {
   }
 
   useEffect(() => {
+    const cache = Object.keys(cleanCache)
+
     if (search && search !== '') {
-      const filtered = fuzzySearch(Object.keys(cleanCache), search)
+      const filtered = fuzzySearch(cache, search, (item) => item)
       setTags(filtered)
     }
+
     if (search === '') {
-      setTags(Object.keys(cleanCache))
+      setTags(cache)
     }
   }, [search])
 

libs/shared/src/Utils/helpers.ts

@@ -1,6 +1,8 @@
 import React from 'react'
 import toast from 'react-hot-toast'
 
+import { NodeEditorContent } from '@mexit/core'
+
 export async function copyTextToClipboard(text: any, toastMessage?: string) {
   await navigator.clipboard
     .writeText(String(text))
@@ -29,3 +31,13 @@ export const resize = (ref: React.RefObject<HTMLElement>) => {
   window.parent.postMessage({ type: 'height-init', height: ref.current.clientHeight }, '*')
 }
 export const randomNumberBetween = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min)
+
+export const addOriginToBlocks = (blocks: NodeEditorContent, source: string) => {
+  return blocks.map((block) => ({
+    ...block,
+    blockMeta: {
+      ...(block.blockMeta ?? {}),
+      origin: source
+    }
+  }))
+}

libs/shared/src/Utils/merge.ts

@@ -19,7 +19,8 @@ export const keysToExcludeInGrouping = [
   'updatedAt',
   'lastEditedBy',
   'tags',
-  'text'
+  'text',
+  'type'
 ]
 export const keysToExcludeInSorting = [
   'id',
@@ -29,7 +30,8 @@ export const keysToExcludeInSorting = [
   'updatedBy',
   'lastEditedBy',
   'tags',
-  'parent'
+  'parent',
+  'type'
 ]
 
 export const findGroupingKey = (keyFrequencyMap: Record<string, number>, keysToExclude?: Array<string>) => {