|
| 1 | +import "@blocknote/core/fonts/inter.css"; |
| 2 | +import { en } from "@blocknote/core/locales"; |
| 3 | +import { BlockNoteView } from "@blocknote/mantine"; |
| 4 | +import "@blocknote/mantine/style.css"; |
| 5 | +import { useCreateBlockNote } from "@blocknote/react"; |
| 6 | +import { |
| 7 | + StreamToolExecutor, |
| 8 | + createAIExtension, |
| 9 | + getAIExtension, |
| 10 | + llmFormats, |
| 11 | +} from "@blocknote/xl-ai"; |
| 12 | +import { en as aiEn } from "@blocknote/xl-ai/locales"; |
| 13 | +import "@blocknote/xl-ai/style.css"; |
| 14 | + |
| 15 | +export default function App() { |
| 16 | + // Creates a new editor instance. |
| 17 | + const editor = useCreateBlockNote({ |
| 18 | + dictionary: { |
| 19 | + ...en, |
| 20 | + ai: aiEn, // add default translations for the AI extension |
| 21 | + }, |
| 22 | + // Register the AI extension |
| 23 | + extensions: [ |
| 24 | + createAIExtension({ |
| 25 | + model: undefined as any, // disable model |
| 26 | + }), |
| 27 | + ], |
| 28 | + // We set some initial content for demo purposes |
| 29 | + initialContent: [ |
| 30 | + { |
| 31 | + type: "heading", |
| 32 | + props: { |
| 33 | + level: 1, |
| 34 | + }, |
| 35 | + content: "Open source software", |
| 36 | + }, |
| 37 | + { |
| 38 | + type: "paragraph", |
| 39 | + content: |
| 40 | + "Open source software refers to computer programs whose source code is made available to the public, allowing anyone to view, modify, and distribute the code. This model stands in contrast to proprietary software, where the source code is kept secret and only the original creators have the right to make changes. Open projects are developed collaboratively, often by communities of developers from around the world, and are typically distributed under licenses that promote sharing and openness.", |
| 41 | + }, |
| 42 | + { |
| 43 | + type: "paragraph", |
| 44 | + content: |
| 45 | + "One of the primary benefits of open source is the promotion of digital autonomy. By providing access to the source code, these programs empower users to control their own technology, customize software to fit their needs, and avoid vendor lock-in. This level of transparency also allows for greater security, as anyone can inspect the code for vulnerabilities or malicious elements. As a result, users are not solely dependent on a single company for updates, bug fixes, or continued support.", |
| 46 | + }, |
| 47 | + { |
| 48 | + type: "paragraph", |
| 49 | + content: |
| 50 | + "Additionally, open development fosters innovation and collaboration. Developers can build upon existing projects, share improvements, and learn from each other, accelerating the pace of technological advancement. The open nature of these projects often leads to higher quality software, as bugs are identified and fixed more quickly by a diverse group of contributors. Furthermore, using open source can reduce costs for individuals, businesses, and governments, as it is often available for free and can be tailored to specific requirements without expensive licensing fees.", |
| 51 | + }, |
| 52 | + ], |
| 53 | + }); |
| 54 | + |
| 55 | + // Renders the editor instance using a React component. |
| 56 | + return ( |
| 57 | + <div> |
| 58 | + <BlockNoteView editor={editor} /> |
| 59 | + |
| 60 | + <div className={"edit-buttons"}> |
| 61 | + {/*Inserts a new block at start of document.*/} |
| 62 | + <button |
| 63 | + className={"edit-button"} |
| 64 | + onClick={async () => { |
| 65 | + const blockToChange = editor.document[1].id; |
| 66 | + |
| 67 | + // Let's get the stream tools so we can invoke them manually |
| 68 | + // In this case, we're using the default stream tools, which allow all operations |
| 69 | + const tools = llmFormats.html.getStreamTools(editor, true); |
| 70 | + |
| 71 | + // Create an executor that can execute StreamToolCalls |
| 72 | + const executor = new StreamToolExecutor(tools); |
| 73 | + |
| 74 | + // Use `executeOne` to invoke a single, non-streaming StreamToolCall |
| 75 | + await executor.executeOne({ |
| 76 | + type: "update", |
| 77 | + id: blockToChange, |
| 78 | + block: "<p>Open source software is cool</p>", |
| 79 | + }); |
| 80 | + |
| 81 | + // make sure the executor is done |
| 82 | + await executor.waitTillEnd(); |
| 83 | + |
| 84 | + // accept the changes after 1 second |
| 85 | + await new Promise((resolve) => setTimeout(resolve, 1000)); |
| 86 | + await getAIExtension(editor).acceptChanges(); |
| 87 | + }} |
| 88 | + > |
| 89 | + Update first block |
| 90 | + </button> |
| 91 | + <button |
| 92 | + className={"edit-button"} |
| 93 | + onClick={async () => { |
| 94 | + const blockToChange = editor.document[1].id; |
| 95 | + |
| 96 | + // Let's get the stream tools so we can invoke them manually |
| 97 | + // In this case, we choose to only get the "update" tool |
| 98 | + const tools = llmFormats.html.getStreamTools(editor, true, { |
| 99 | + // only allow "update" operations |
| 100 | + update: true, |
| 101 | + }); |
| 102 | + |
| 103 | + // Create an executor that can execute StreamToolCalls |
| 104 | + const executor = new StreamToolExecutor(tools); |
| 105 | + |
| 106 | + // We'll stream two updates: a partial update and a full update |
| 107 | + // to use streaming operations, we need to get a writer |
| 108 | + const writer = executor.writable.getWriter(); |
| 109 | + |
| 110 | + // write a partial update |
| 111 | + writer.write({ |
| 112 | + operation: { |
| 113 | + type: "update", |
| 114 | + id: blockToChange, |
| 115 | + block: |
| 116 | + "<p>This Open source software like Hello World refers to computer programs, this is a longer update, let's write a first sentence that's quite long long long long here.", |
| 117 | + }, |
| 118 | + // this is not an update to an earlier "update" StreamToolCall |
| 119 | + isUpdateToPreviousOperation: false, |
| 120 | + // this operation is a partial update and will be "completed" by the next update |
| 121 | + isPossiblyPartial: true, |
| 122 | + }); |
| 123 | + await new Promise((resolve) => setTimeout(resolve, 3000)); |
| 124 | + writer.write({ |
| 125 | + operation: { |
| 126 | + type: "update", |
| 127 | + id: blockToChange, |
| 128 | + block: |
| 129 | + "<p>This Open source software like Hello World refers to computer programs, this is a longer update, let's write a first sentence that's quite long long long long here. And now let's write a second sentence.</p>", |
| 130 | + }, |
| 131 | + // this is an update to an earlier "update" StreamToolCall |
| 132 | + isUpdateToPreviousOperation: true, |
| 133 | + // this operation is not a partial update, we've received the entire invocation |
| 134 | + isPossiblyPartial: false, |
| 135 | + }); |
| 136 | + |
| 137 | + // close the writer |
| 138 | + writer.close(); |
| 139 | + |
| 140 | + // wait till the executor is done |
| 141 | + await executor.waitTillEnd(); |
| 142 | + |
| 143 | + // accept the changes after 1 second |
| 144 | + await new Promise((resolve) => setTimeout(resolve, 1000)); |
| 145 | + await getAIExtension(editor).acceptChanges(); |
| 146 | + }} |
| 147 | + > |
| 148 | + Update first block (streaming) |
| 149 | + </button> |
| 150 | + <button |
| 151 | + className={"edit-button"} |
| 152 | + onClick={async () => { |
| 153 | + const blockToChange = editor.document[1].id; |
| 154 | + |
| 155 | + // Let's get the stream tools so we can invoke them manually |
| 156 | + // In this case, we choose to only get the "update" tool |
| 157 | + const tools = llmFormats.html.getStreamTools(editor, true, { |
| 158 | + // only allow "update" operations |
| 159 | + update: true, |
| 160 | + }); |
| 161 | + |
| 162 | + // Create an executor that can execute StreamToolCalls |
| 163 | + const executor = new StreamToolExecutor(tools); |
| 164 | + |
| 165 | + // We'll stream two updates: a partial update and a full update |
| 166 | + // to use streaming operations, we need to get a writer |
| 167 | + const writer = executor.writable.getWriter(); |
| 168 | + |
| 169 | + // write a partial update, notice how the JSON is cut off (simulating a streaming json response) |
| 170 | + writer.write( |
| 171 | + `{ |
| 172 | + "type": "update", |
| 173 | + "id": ${JSON.stringify(blockToChange + "$")}, |
| 174 | + "block": "<p>This Open source software like Hello World refers to computer programs, this is a longer update, let's write a first sentence that's quite long long long long here.`, |
| 175 | + ); |
| 176 | + await new Promise((resolve) => setTimeout(resolve, 3000)); |
| 177 | + writer.write(`{ |
| 178 | + "type": "update", |
| 179 | + "id": ${JSON.stringify(blockToChange + "$")}, |
| 180 | + "block": |
| 181 | + "<p>This Open source software like Hello World refers to computer programs, this is a longer update, let's write a first sentence that's quite long long long long here. And now let's write a second sentence.</p>" |
| 182 | +}`); |
| 183 | + |
| 184 | + // close the writer |
| 185 | + writer.close(); |
| 186 | + |
| 187 | + // wait till the executor is done |
| 188 | + await executor.waitTillEnd(); |
| 189 | + |
| 190 | + // accept the changes after 1 second |
| 191 | + await new Promise((resolve) => setTimeout(resolve, 1000)); |
| 192 | + await getAIExtension(editor).acceptChanges(); |
| 193 | + }} |
| 194 | + > |
| 195 | + Update first block (streaming strings) |
| 196 | + </button> |
| 197 | + </div> |
| 198 | + </div> |
| 199 | + ); |
| 200 | +} |
0 commit comments