feat: add thinking for sidebar

README.md

@@ -29,8 +29,12 @@ Todos
             - [x] Tiptap: [track-change-extension](https://github.com/chenyuncai/tiptap-track-change-extension)
             - [ ] ProseMirror Change: [Changeset](https://github.com/ProseMirror/prosemirror-changeset)
             - [ ] [@remirror/extension-diff](https://github.com/remirror/remirror/tree/main/packages/remirror__extension-diff)
-    - [ ] More plugins for
-      Intelli: [https://github.com/ueberdosis/tiptap/issues/819](https://github.com/ueberdosis/tiptap/issues/819)
+- [ ] More plugins for Intelli: [https://github.com/ueberdosis/tiptap/issues/819](https://github.com/ueberdosis/tiptap/issues/819)
+    - [ ] Sidebar Intellij [Microsoft 365](https://techcommunity.microsoft.com/t5/microsoft-365-blog/introducing-new-ai-enhancements-in-microsoft-365-new-features/ba-p/3643499)
+    - [ ] Correction text
+    - [ ] Grammarly
+    - [ ] Text Prediction
+    - [ ] Similarity
 - [ ] LLM Connection
     - [ ] OpenAI
     - [ ] Others ?

components/editor/live-editor.jsx

@@ -1,17 +1,22 @@
+import React from 'react'
+
+import { EditorContent, useEditor } from '@tiptap/react'
 import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
 import TextStyle from '@tiptap/extension-text-style'
-import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import React from 'react'
-import { MenuBar } from './menu-bar'
+
+import * as Accordion from '@radix-ui/react-accordion'
 
 import MarkdownIt from 'markdown-it'
+
+import { MenuBar } from './menu-bar'
 import { MenuBubble } from './intelli/menu/menu-bubble'
 import { createSlashExtension } from './intelli/slash-extension'
 import { CommandFunctions } from './action/command-functions'
 import { createAiBlock } from './intelli/ai-block-extension'
 import TrackChangeExtension from './diff/track-change-extension'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
 
 const md = new MarkdownIt()
 
@@ -73,6 +78,7 @@ Chinese text for testing grammar and spellings, select long text to see the menu
 虽世殊事异，所以兴怀，其致一也。后之览者，亦将有感于斯文。
 
 `
+
 const LiveEditor = () => {
   const editor = useEditor({
     extensions,
@@ -84,22 +90,80 @@ const LiveEditor = () => {
     },
   })
 
-  return (
-    <div>
-      <div className={'domain-buttons'}>
-        <span className={"scene-text"}>Scene: (Todo)</span>
-        <button disabled={true} className={'domain-button'}>Blog</button>
-        <button disabled={true} className={'domain-button'}>Weekly Report</button>
-        <button disabled={true} className={'domain-button'}>Meeting Notes</button>
-        <button disabled={true} className={'domain-button'}>User Story</button>
-      </div>
-      <div className={'editor-section'}>
-        {editor && <MenuBar editor={editor}/>}
-        <EditorContent editor={editor}/>
-        {editor && <MenuBubble editor={editor}/>}
+  return (<div className={'container'}>
+      <div className={'editor-block'}>
+        <div className={'domain-buttons'}>
+          <span className={'scene-text'}>Scene: (Todo)</span>
+          <button disabled={true} className={'domain-button'}>Blog</button>
+          <button disabled={true} className={'domain-button'}>Weekly Report</button>
+          <button disabled={true} className={'domain-button'}>Meeting Notes</button>
+          <button disabled={true} className={'domain-button'}>User Story</button>
+        </div>
+        <div className={'editor-section'}>
+          {editor && <MenuBar editor={editor}/>}
+          <EditorContent editor={editor}/>
+          {editor && <MenuBubble editor={editor}/>}
+        </div>
       </div>
+
+      {editor && <Sidebar eidtor={editor}/>}
     </div>
   )
 }
 
+const Sidebar = () => {
+  return <aside className={'fixed top-0 right-0 z-40 w-128 h-screen'}
+                aria-label="Sidebar">
+    <div className={'h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800'}>
+      <Accordion.Root className={'AccordionRoot'} type="multiple" defaultValue={['item-1', 'item-2', 'item-3']}>
+        <Accordion.Item className={'AccordionItem'} value="item-1">
+          <AccordionTrigger>Grammarly</AccordionTrigger>
+          <AccordionContent>
+            TODO: use some model to check grammar
+          </AccordionContent>
+        </Accordion.Item>
+
+        <Accordion.Item className={'AccordionItem'} value="item-2">
+          <AccordionTrigger>Text Prediction</AccordionTrigger>
+          <AccordionContent>
+            TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to predict text
+          </AccordionContent>
+        </Accordion.Item>
+
+        <Accordion.Item className={'AccordionItem'} value="item-3">
+          <AccordionTrigger>Similarity</AccordionTrigger>
+          <Accordion.Content className={'AccordionContent'}>
+            <div className={'AccordionContentText'}>
+              TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to calculate similarity
+            </div>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  </aside>
+}
+
+const AccordionTrigger = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
+  <Accordion.Header className="AccordionHeader">
+    <Accordion.Trigger
+      className={'AccordionTrigger'}
+      {...props}
+      ref={forwardedRef}
+    >
+      {children}
+      <ChevronDownIcon className="AccordionChevron" aria-hidden/>
+    </Accordion.Trigger>
+  </Accordion.Header>
+))
+
+const AccordionContent = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
+  <Accordion.Content
+    className={'AccordionContent'}
+    {...props}
+    ref={forwardedRef}
+  >
+    <div className="AccordionContentText">{children}</div>
+  </Accordion.Content>
+))
+
 export default LiveEditor

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/popper": "^0.1.0",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",

styles/global.css

@@ -331,6 +331,102 @@ input {
     cursor: default;
 }
 
+.AccordionRoot {
+    border-radius: 6px;
+    width: 300px;
+    background-color: var(--mauve-6);
+    box-shadow: 0 2px 10px var(--black-a4);
+}
+
+.AccordionItem {
+    overflow: hidden;
+    margin-top: 1px;
+}
+
+.AccordionItem:first-child {
+    margin-top: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.AccordionItem:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.AccordionItem:focus-within {
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 0 2px var(--mauve-12);
+}
+
+.AccordionHeader {
+    display: flex;
+}
+
+.AccordionTrigger {
+    font-family: inherit;
+    background-color: transparent;
+    padding: 0 20px;
+    height: 45px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 15px;
+    line-height: 1;
+    color: var(--violet-11);
+    box-shadow: 0 1px 0 var(--mauve-6);
+    background-color: white;
+}
+
+.AccordionTrigger:hover {
+    background-color: var(--mauve-2);
+}
+
+.AccordionContent {
+    overflow: hidden;
+    font-size: 15px;
+    color: var(--mauve-11);
+    background-color: var(--mauve-2);
+}
+.AccordionContent[data-state='open'] {
+    animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.AccordionContent[data-state='closed'] {
+    animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.AccordionContentText {
+    padding: 15px 20px;
+}
+
+.AccordionChevron {
+    color: var(--violet-10);
+    transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.AccordionTrigger[data-state='open'] > .AccordionChevron {
+    transform: rotate(180deg);
+}
+
+@keyframes slideDown {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--radix-accordion-content-height);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        height: var(--radix-accordion-content-height);
+    }
+    to {
+        height: 0;
+    }
+}
+
 .is-active {
     background-color: var(--violet-3);
 }