You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -45,12 +45,66 @@ Perplexity.ai is famously known for its LLM-based search engine, but many may no
45
45
46
46
## How does it work?
47
47
48
-
- Read more about the [architecture](./docs/architecture.md).
48
+
This is a high-level overview of the network traffic intercepting which provides the extension with the ability to alter the behavior of the host page.
Copy file name to clipboardExpand all lines: docs/architecture.md
+61-12Lines changed: 61 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,28 +6,77 @@ The following implementations are opinionated and may not be the best solution.
6
6
7
7
## Intercepting Websocket Messages
8
8
9
-
By overriding native classes and methods, Complexity is able to intercept and modify the messages sent and received by the Perplexity.ai's websocket connection, including the fallback to long-polling.
Some magic like switching model/focus mode on the fly, or modifying collections, is done by intercepting the messages sent and received by Perplexity.ai's websocket connection, including the fallback to long-polling.
10
62
11
63
## Custom DOM Mutation Observer
12
64
13
-
Although the all LLMs' context window on Perplexity.ai is limited to roughly 32K, a thread/convo can get infinitely long, there's no limit to how many messages can be sent. And the performance of the page will degrade as the thread grows. To have extra features, while maintaining the performance, excessive use of MutationObserver guarantees to significantly slow down the page. To tackle this, Complexity has a custom implemented MutationObserver wrapper class that applies many optimizations to keep the main thread as responsive as possible.
65
+
Although all LLMs' context windows on Perplexity.ai are limited to roughly 32K, a thread/conversation can get infinitely long; there's no limit to how many messages can be sent. The performance of the page will degrade as the thread grows due to accumulated DOM mutations from MutationObserver. There have been several attempts to optimize the MutationObserver (batching, throttling, queueing, etc.), and the performance is much better than in previous iterations of Complexity.
66
+
67
+
It is shown that the latest version of Complexity can work well with a thread of ~50 messages (up from 20), but it is still recommended NOT to use that many messages in a thread.
14
68
15
-
## Communication between js contexts
69
+
## Communication between JS contexts
16
70
17
-
Due to the restriction of the isolated context, content scripts in isolated context cannot directly access the `window` object, react fiber node data, and the Websocket class itself, which a lot of the features of Complexity rely on. Hence, Complexity implements a simple request-response communication bridge to share data between different js contexts (isolated <-> main-world) based on the `window.postMessage` API.
71
+
Due to the restrictions of the isolated context, content scripts in isolated contexts cannot directly access the `window` object, React fiber node data, and the Websocket class itself, which many of Complexity's features rely on. Hence, Complexity implements a simple request-response communication bridge to share data between different JS contexts (isolated <-> main-world) based on the `window.postMessage` API.
18
72
19
73
## React
20
74
21
-
Complexity UI's is rendered using React:
75
+
Complexity's UI is rendered using React:
22
76
23
77
- TailwindCSS for styling.
24
78
- Ark-UI for headless UI components.
25
79
26
-
Complexity uses a combination of @tanstack/react-query and zustand for state management:
27
-
28
-
-@tanstack/react-query for overall async states: data fetching and internal communication between js contexts.
29
-
- zustand for local states: UI states and other local states.
30
-
31
-
## Why there is `jquery` dependency?
80
+
## Why is there `jquery` dependency?
32
81
33
-
-Although it is mentioned that the project uses React, `jquery` is exclusively used for direct DOM selections and manipulations of the host page. It provides much better DX than vanilla js methods.
82
+
Although it is mentioned that the project uses React, `jquery` is exclusively used for direct DOM selections and manipulations of the host page. It provides a much better developer experience (DX) than vanilla JS methods.
0 commit comments