Atomic assistant #951

browser/data-browser/package.json

@@ -14,19 +14,23 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/react": "^1.1.1",
     "@emotion/is-prop-valid": "^1.3.1",
+    "@modelcontextprotocol/sdk": "^1.6.1",
+    "@openrouter/ai-sdk-provider": "^0.4.3",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.1",
     "@tanstack/react-router": "^1.95.1",
-    "@tiptap/extension-image": "^2.9.1",
-    "@tiptap/extension-link": "^2.9.1",
-    "@tiptap/extension-placeholder": "^2.9.1",
-    "@tiptap/extension-typography": "^2.9.1",
-    "@tiptap/pm": "^2.9.1",
-    "@tiptap/react": "^2.9.1",
-    "@tiptap/starter-kit": "^2.9.1",
-    "@tiptap/suggestion": "^2.9.1",
+    "@tiptap/extension-image": "^2.11.7",
+    "@tiptap/extension-link": "^2.11.7",
+    "@tiptap/extension-mention": "^2.11.7",
+    "@tiptap/extension-placeholder": "^2.11.7",
+    "@tiptap/extension-typography": "^2.11.7",
+    "@tiptap/pm": "^2.11.7",
+    "@tiptap/react": "^2.11.7",
+    "@tiptap/starter-kit": "^2.11.7",
+    "@tiptap/suggestion": "^2.11.7",
     "@tomic/react": "workspace:*",
+    "ai": "^4.1.61",
     "emoji-mart": "^5.6.0",
     "polished": "^4.3.1",
     "prismjs": "^1.29.0",
@@ -50,7 +54,8 @@
     "styled-components": "^6.1.13",
     "stylis": "4.3.0",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.10"
+    "tiptap-markdown": "^0.8.10",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@tanstack/router-devtools": "^1.95.1",

browser/data-browser/src/chunks/MarkdownEditor/AIChatInput/AsyncAIChatInput.tsx

@@ -0,0 +1,155 @@
+import { EditorContent, useEditor, type JSONContent } from '@tiptap/react';
+import { styled } from 'styled-components';
+import StarterKit from '@tiptap/starter-kit';
+import Mention from '@tiptap/extension-mention';
+import { TiptapContextProvider } from '../TiptapContext';
+import { EditorWrapperBase } from '../EditorWrapperBase';
+import { searchSuggestionBuilder } from './resourceSuggestions';
+import { useEffect, useRef, useState } from 'react';
+import { EditorEvents } from '../EditorEvents';
+import { Markdown } from 'tiptap-markdown';
+import { useStore } from '@tomic/react';
+import { useSettings } from '../../../helpers/AppSettings';
+import type { Node } from '@tiptap/pm/model';
+import Placeholder from '@tiptap/extension-placeholder';
+
+// Modify the Mention extension to allow serializing to markdown.
+const SerializableMention = Mention.extend({
+  addStorage() {
+    return {
+      markdown: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        serialize(state: any, node: Node) {
+          state.write('@' + (node.attrs.label || ''));
+          state.renderContent(node);
+          state.flushClose(1);
+          state.closeBlock(node);
+        },
+      },
+    };
+  },
+});
+
+interface AsyncAIChatInputProps {
+  onMentionUpdate: (mentions: string[]) => void;
+  onChange: (markdown: string) => void;
+  onSubmit: () => void;
+}
+
+const AsyncAIChatInput: React.FC<AsyncAIChatInputProps> = ({
+  onMentionUpdate,
+  onChange,
+  onSubmit,
+}) => {
+  const store = useStore();
+  const { drive } = useSettings();
+  const [markdown, setMarkdown] = useState('');
+  const markdownRef = useRef(markdown);
+  const onSubmitRef = useRef(onSubmit);
+
+  const editor = useEditor({
+    extensions: [
+      Markdown.configure({
+        html: true,
+      }),
+      StarterKit.extend({
+        addKeyboardShortcuts() {
+          return {
+            Enter: () => {
+              // Check if the cursor is in a code block, if so allow the user to press enter.
+              // Pressing shift + enter will exit the code block.
+              if ('language' in this.editor.getAttributes('codeBlock')) {
+                return false;
+              }
+
+              // The content has to be read from a ref because this callback is not updated often leading to stale content.
+              onSubmitRef.current();
+              setMarkdown('');
+              this.editor.commands.clearContent();
+
+              return true;
+            },
+          };
+        },
+      }).configure({
+        blockquote: false,
+        bulletList: false,
+        orderedList: false,
+        // paragraph: false,
+        heading: false,
+        listItem: false,
+        horizontalRule: false,
+        bold: false,
+        strike: false,
+        italic: false,
+      }),
+      SerializableMention.configure({
+        HTMLAttributes: {
+          class: 'ai-chat-mention',
+        },
+        suggestion: searchSuggestionBuilder(store, drive),
+        renderText({ options, node }) {
+          return `${options.suggestion.char}${node.attrs.title}`;
+        },
+      }),
+      Placeholder.configure({
+        placeholder: 'Ask me anything...',
+      }),
+    ],
+  });
+
+  const handleChange = (value: string) => {
+    setMarkdown(value);
+    markdownRef.current = value;
+    onChange(value);
+
+    if (!editor) {
+      return;
+    }
+
+    console.log('update', editor.getJSON());
+    const mentions = digForMentions(editor.getJSON());
+    onMentionUpdate(Array.from(new Set(mentions)));
+  };
+
+  useEffect(() => {
+    markdownRef.current = markdown;
+    onSubmitRef.current = onSubmit;
+  }, [markdown, onSubmit]);
+
+  return (
+    <EditorWrapper hideEditor={false}>
+      <TiptapContextProvider editor={editor}>
+        <EditorContent editor={editor} />
+        <EditorEvents onChange={handleChange} />
+      </TiptapContextProvider>
+    </EditorWrapper>
+  );
+};
+
+export default AsyncAIChatInput;
+
+const EditorWrapper = styled(EditorWrapperBase)`
+  padding: ${p => p.theme.size(2)};
+  font-size: 16px;
+  line-height: 1.5;
+
+  .ai-chat-mention {
+    background-color: ${p => p.theme.colors.mainSelectedBg};
+    color: ${p => p.theme.colors.mainSelectedFg};
+    border-radius: 5px;
+    padding-inline: ${p => p.theme.size(1)};
+  }
+`;
+
+function digForMentions(data: JSONContent): string[] {
+  if (data.type === 'mention') {
+    return [data.attrs!.id];
+  }
+
+  if (data.content) {
+    return data.content.flatMap(digForMentions);
+  }
+
+  return [];
+}

browser/data-browser/src/chunks/MarkdownEditor/AIChatInput/MentionList.tsx

@@ -0,0 +1,116 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import styled from 'styled-components';
+
+export type SearchSuggestion = {
+  id: string;
+  label: string;
+};
+export interface MentionListProps {
+  items: SearchSuggestion[];
+  command: (item: SearchSuggestion) => void;
+}
+
+export interface MentionListRef {
+  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean;
+}
+
+export const MentionList = forwardRef<MentionListRef, MentionListProps>(
+  ({ items, command }, ref) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const selectItem = (index: number) => {
+      const item = items[index];
+
+      if (item) {
+        command(item);
+      }
+    };
+
+    const upHandler = () => {
+      setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+    };
+
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % items.length);
+    };
+
+    const enterHandler = () => {
+      selectItem(selectedIndex);
+    };
+
+    useEffect(() => setSelectedIndex(0), [items]);
+
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === 'ArrowUp') {
+          upHandler();
+
+          return true;
+        }
+
+        if (event.key === 'ArrowDown') {
+          downHandler();
+
+          return true;
+        }
+
+        if (event.key === 'Enter') {
+          enterHandler();
+
+          return true;
+        }
+
+        return false;
+      },
+    }));
+
+    return (
+      <DropdownMenu>
+        {items.length ? (
+          items.map((item, index) => (
+            <button
+              className={index === selectedIndex ? 'is-selected' : ''}
+              key={item.id}
+              onClick={() => selectItem(index)}
+            >
+              {item.label}
+            </button>
+          ))
+        ) : (
+          <div className='item'>No result</div>
+        )}
+      </DropdownMenu>
+    );
+  },
+);
+
+MentionList.displayName = 'MentionList';
+
+const DropdownMenu = styled.div`
+  background: ${p => p.theme.colors.bg};
+  border-radius: 0.7rem;
+  box-shadow: ${p => p.theme.boxShadowIntense};
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  overflow: auto;
+  padding: 0.4rem;
+  position: relative;
+
+  button {
+    background: transparent;
+    appearance: none;
+    border: none;
+    border-radius: ${p => p.theme.radius};
+    display: flex;
+    gap: 0.25rem;
+    text-align: left;
+    width: 100%;
+
+    &:hover,
+    &.is-selected {
+      background-color: ${p => p.theme.colors.mainSelectedBg};
+      color: ${p => p.theme.colors.mainSelectedFg};
+    }
+  }
+`;