75 |
76 |
79 |
80 |
81 |
28 |
38 |
39 |
40 |
75 |
--------------------------------------------------------------------------------
/src/components/messageRenderer.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
51 |
52 |
53 |
29 |
37 |
30 |
32 |
33 |
36 | {{ title }}
34 | {{ subtitle }}
35 |
50 |
64 |
65 |
66 |
94 |
--------------------------------------------------------------------------------
/src/components/sidebarMenu/Sidebar.vue:
--------------------------------------------------------------------------------
1 |
81 |
82 |
83 |
89 |
90 |
91 |
104 |
--------------------------------------------------------------------------------
/src/assets/svg/CloudIcon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/redirectorEdge.vue:
--------------------------------------------------------------------------------
1 |
36 |
37 |
38 |
64 |
65 |
66 |
113 |
--------------------------------------------------------------------------------
/src/components/simpleText.vue:
--------------------------------------------------------------------------------
1 |
56 |
57 |
58 |
59 |
54 | {{ localStates.text }}
55 |
56 |
57 |
58 |
65 |
66 |
83 |
84 |
85 |
140 |
--------------------------------------------------------------------------------
/src/components/messengerItems/messengerDelay.vue:
--------------------------------------------------------------------------------
1 |
47 |
48 |
49 |
74 |
82 |
60 |
61 |
78 |
79 |
80 |
146 |
--------------------------------------------------------------------------------
/src/components/container.vue:
--------------------------------------------------------------------------------
1 |
46 |
47 |
48 | Waiting for User Input
67 |
69 |
70 |
71 |
72 |
76 |
77 |
58 |
85 |
86 |
87 |
109 |
110 |
111 |
165 |
--------------------------------------------------------------------------------
/src/components/messengerItems/messengerDynamic.vue:
--------------------------------------------------------------------------------
1 |
59 |
60 |
61 |
59 |
60 |
61 |
74 |
75 | Dynamic Message Generation
82 |
89 |
90 |
107 |
128 |
129 |
130 |
179 |
--------------------------------------------------------------------------------
/src/components/boxWithTitle.vue:
--------------------------------------------------------------------------------
1 |
49 |
50 |
51 |
52 |
109 |
110 |
111 |
112 |
113 |
114 |
127 |
68 |
69 |
110 |
111 |
112 |
192 |
--------------------------------------------------------------------------------
/src/components/imageContainer.vue:
--------------------------------------------------------------------------------
1 |
53 |
54 |
55 |
80 |
81 |
109 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
94 |
95 |
96 |
97 |
106 |
107 |
108 |
65 |
101 |
111 |
112 |
134 |
135 |
136 |
199 |
--------------------------------------------------------------------------------
/src/utils/createVueNode.js:
--------------------------------------------------------------------------------
1 | import getId from "./radomId";
2 |
3 | const createVueNode = (event, addNodes, project, store) => {
4 | let id = getId();
5 |
6 | const type = event.dataTransfer?.getData("application/vueflow");
7 | const position = project({ x: event.clientX - 450, y: event.clientY - 20 });
8 |
9 | let newNode = {
10 | id: type + id,
11 | type,
12 | position,
13 | label: `${type} node`,
14 | };
15 |
16 | //////////////////////////////////////////.
17 | switch (type) {
18 | case "facebook-message":
19 | store.$patch((state) => {
20 | state.layers.messages.push({
21 | id: newNode.id,
22 | type: "facebook-message",
23 | label: "Label",
24 | color: "#ffffff",
25 | items: [
26 | {
27 | id: getId(),
28 | type: "messengerTextVue",
29 | text: "Enter Message Text",
30 | buttons: [],
31 | },
32 | ],
33 | });
34 | });
35 | break;
36 |
37 | case "starting-step":
38 | store.$patch((state) => {
39 | state.layers.messages.push({
40 | id: newNode.id,
41 | type: "starting-step",
42 | label: "Label",
43 | content: "Type",
44 | color: "#ffffff",
45 | items: [],
46 | });
47 | });
48 | break;
49 |
50 | case "container":
51 | store.$patch((state) => {
52 | state.layers.messages.push({
53 | id: newNode.id,
54 | type: "container",
55 | label: "Label",
56 | width: "20rem",
57 | height: "10rem",
58 | color: "#3A8CC7",
59 | });
60 | });
61 | break;
62 |
63 | case "redirector":
64 | store.$patch((state) => {
65 | state.layers.messages.push({
66 | id: newNode.id,
67 | type: "redirector",
68 | label: "Label",
69 | color: "#000000",
70 | });
71 | });
72 | break;
73 |
74 | case "node-image":
75 | store.$patch((state) => {
76 | state.layers.messages.push({
77 | id: newNode.id,
78 | type: "node-image",
79 | label: "Label",
80 | src: "",
81 | width: "340px",
82 | height: "240px",
83 | color: "#000000",
84 | });
85 | });
86 | break;
87 |
88 | case "free-mind":
89 | store.$patch((state) => {
90 | state.layers.messages.push({
91 | id: newNode.id,
92 | type: "free-mind",
93 | label: "Label",
94 | src: "",
95 | width: "340px",
96 | height: "240px",
97 | color: "#40CE03",
98 | });
99 | });
100 | break;
101 |
102 | case "box-with-title":
103 | store.$patch((state) => {
104 | state.layers.messages.push({
105 | id: newNode.id,
106 | type: "box-with-title",
107 | label: "Label",
108 | title: "Title",
109 | subtitle: "Subtitle",
110 | color: "#000000",
111 | });
112 | });
113 | break;
114 |
115 | case "simple-text":
116 | store.$patch((state) => {
117 | state.layers.messages.push({
118 | id: newNode.id,
119 | type: "simple-text",
120 | subtitle: "Subtitle",
121 | color: "#000000",
122 | });
123 | });
124 | break;
125 |
126 | case "quick-reply":
127 | store.$patch((state) => {
128 | state.layers.messages.push({
129 | id: newNode.id,
130 | type: "quick-reply",
131 | text: "Quick Reply",
132 | color: "#ffffff",
133 | });
134 | });
135 | break;
136 |
137 | default:
138 | break;
139 | }
140 | //////////////////////////////////////////.
141 |
142 | // Implementation of a basic container catching
143 | if (event.target.parentNode.id.substring(-1, 9) === "container") {
144 | newNode.parentNode = event.target.parentNode.id;
145 | }
146 | ////////////////////////////////////////////.
147 |
148 | addNodes([newNode]);
149 | };
150 |
151 | const copyVueNode = (addNodes, eid, getNode, store) => {
152 | let id = getId(); // Create a New UUid
153 | const nodeById = getNode.value(eid); // Get The node to copy by its Id (eid)
154 |
155 | const type = nodeById.type; // Get the node's type
156 | // When we copy, we need to create it above the old one (translate +50 x y)
157 | const position = {
158 | ...nodeById.position,
159 | x: nodeById.position.x + 50,
160 | y: nodeById.position.y - 50,
161 | };
162 |
163 | // Create a new message in the store
164 | store.$patch((state) => {
165 | const currentMessage = state.layers.messages.filter(
166 | (item) => item.id === eid
167 | ); // Get all the old message info
168 |
169 | state.layers.messages = [
170 | ...state.layers.messages,
171 | {
172 | ...JSON.parse(JSON.stringify(currentMessage))[0], // The element is copied by reference do we need to dereference it
173 | id: type + id,
174 | },
175 | ];
176 | });
177 |
178 | addNodes([
179 | {
180 | id: type + id,
181 | type,
182 | position,
183 | label: `${type} node`,
184 | },
185 | ]);
186 | };
187 |
188 | export {
189 | createVueNode,
190 | copyVueNode
191 | };
192 |
--------------------------------------------------------------------------------
/src/components/iframe.vue:
--------------------------------------------------------------------------------
1 |
49 |
50 |
51 |
66 |
67 |
68 |
93 |
94 |
102 | ![]()
103 |
109 |
110 |
61 |
98 |
102 |
108 |
109 |
110 |
132 |
133 |
134 |
208 |
--------------------------------------------------------------------------------
/src/components/facebookMessage.vue:
--------------------------------------------------------------------------------
1 |
46 |
47 |
48 |
62 |
63 |
64 |
89 |
90 |
54 |
86 |
87 |
88 |
199 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Facebook Messenger Flowchart
2 | [](https://opensource.org/licenses/MIT)
3 |
4 | This app is an example of how to use [vue-flow](https://github.com/bcakmakoglu/vue-flow) with [Pinia](https://pinia.vuejs.org/) store, to create a flow with custom components, its main purpose is to create
5 | flowchart that helps to describe Facebook Messenger bot action. The flowchart and all of its data can be exported and imported to simple text file. The project is just at it's begining but many functionnality will be implemented.
6 |
7 | ## How It Works
8 |
9 | - **Nodes** can be dragged from the sidebar and dropped into the view.
10 | - Adding **Messenger Items** can be done using the messenger editor, to open it we just have to double click a Facebook Send Message Node.
11 | - All functionnality of [vue-flow](https://github.com/bcakmakoglu/vue-flow) can be used on it like all keyboards shortcuts as "BackSpace" for deleting elements and "Shift" to toogle selection so it is possible to drag many nodes at once.
12 |
13 | ## Screenshoot
14 |
15 | 
16 |
17 | ## Description of custom components
18 | ### Primary Components
19 |
20 | * `Simple Text` : A node that is used as simple text container.
21 | * `Box with title` : As the previous node, this one has two more inputs, and a label and a title.
22 | * `Container` : **[Resizable]** This components has many special features, it cas be used as a parent to other components. Dragging directly a node from the sidebar into its body will set this one as the dragged node's parent. As described in [vue-flow](https://github.com/bcakmakoglu/vue-flow) docs when a parent container move, all of it's childs will move along him, it is possible to dynamicaly set and unset the parent of a child by using the `Menu` that is displayed when the element is hovered.
23 | * `Redirector Edge` : The use case of this node is to redirect the edge from the right hanlde of a node to it's left Handle, so it is possible to get a better control on how the flow returns back in the diagram.
24 | * `Simple Iframe` : **[Resizable]** [vue-flow](https://github.com/bcakmakoglu/vue-flow) is a tool that helps us to dynamicaly move DOM elements in the view, so all elements that exists can be used as a custom node, this one is a simple iFrame that accept links as Dynamic input.
25 | * `Image` : **[Resizable]** It is possible to display an image directly in a custom node, as we stated earlier, the example of a Vide is shown in the secondary components inside a Facebook Message node.
26 | * `Starting Step` : A simple node that helps to describe a step that will trigger a Message, or everything else.
27 | * `Send Message` : This node displays secondary components inside it, we can toggle the `Message Editor` by double clicking the node itself.
28 | * `Quick Reply` : This components will display a Quick Reply like node.
29 |
30 | #### Custom Edges
31 | Edges gets its source from a Handle to point to another Handle, Edges in VueFlow is just a simple SVG, so we can create a custom Edge by creating custom SVG. VueFlow offer a great flexibility with this aproach. I tryed to handle as much case as I could and colored to red unhandled Edges cases.
32 |
33 | ### Secondary Components
34 | * `Message Editor` : The message editor helps to add or to delete elements in the `Send Message` node. To open it, we can double click into a Facebook Message Node. The same action can be used to close it, or we can just use the "Esc" button.
35 |
36 | It is worth to note that `Drag and Drop` functionnalities are enabled only in it to helps sorting the created elements.
37 |
38 | This is the lists of all components available as Facebook Message :
39 |
40 | - `Simple Message Text` : We can add up to three buttons.
41 | - `Image` : With two inputs, one of them is an input source, if filled, it will change the image by the one which the url is redirecting to, and a button.
42 | - `Card` : Similar to the image, but it has three inputs, a source, a title and a subtitle. It has also three buttons and a default action.
43 | - `Audio, File, Delay, UserInput, Dynamic` : These three elements are just a simple input with some styles and logos.
44 | - `Video` : This one can take a video url as an input, so it can play it directly in the flowchart.
45 |
46 | More informations on the messenger custom message that Facebook Messenger API expose can be found on their official documentation :
47 | [Meta For Developers](https://developers.facebook.com/docs/messenger-platform/reference/send-api/).
48 |
49 | :point_up: This another program also written in [Vue.js](https://vuejs.org/) was created to make the process of creating all types of message as a JSON less painfull :wink: : [fb-send-api-helper](https://github.com/MJaonary/fb-send-api-helper).
50 |
51 | ## Menu Functionalities
52 | When we hover an node, a little menu will always apear at the top of the components :
53 |
54 | * `Color Picker` : It can be used to change the color attribute of nodes by dynamicaly choosing a custom color.
55 | * `Delete Icon` : Instead of the VueFlow default delete function by directly pressing "BackSpace", we can use this menu button to trigger the same action.
56 | * `Copy Icon` : A node can be duplicated by pressing this button, the result is a different element, with the same type and the same content.
57 | * `Setting Icon` : `Container` It was stated before that a container can act as a parent for one or many node, we can dynamicaly assign or remove a parent from the menu with this option.
58 |
59 | ## Save - Restore - Import - Export
60 | These four functionnality helps to save localy and share the generated flowchart.
61 | * `Save` : This option will save the current state of the flowchart to the localStorage.
62 | * `Restore` : The Restore option work with the `Save` one, to restore directly the latest saved state by replacing all of it.
63 | * `Export` : When this option is choosen, the latest state will be exported to a filen, in this case, downloaded.
64 | * `Import` : A valid exported file can be imported and stored as a new saved state that we can `Restore`.
65 |
66 | ## Project Setup
67 |
68 | The project is a Vuejs app created using Vite.
69 |
70 | ```sh
71 | npm install
72 | ```
73 |
74 | ### Compile and Hot-Reload for Development
75 |
76 | ```sh
77 | npm run dev
78 | ```
79 |
80 | ### Compile and Minify for Production
81 |
82 | ```sh
83 | npm run build
84 | ```
85 |
86 | ## 💝 Special Thanks
87 |
88 | This project is built with
89 |
90 | - [vue-flow](https://github.com/bcakmakoglu/vue-flow)
91 | - Vue flow made possible building this tool by simplifing everything.
92 |
93 | - [vue-smooth-dnd](https://github.com/kutlugsahin/vue-smooth-dnd)
94 | - This tools helped with the Drag and Drop Functionality.
95 |
--------------------------------------------------------------------------------
/src/components/topMenu.vue:
--------------------------------------------------------------------------------
1 |
128 |
129 |
130 |
166 |
167 |
168 |
266 |
--------------------------------------------------------------------------------
/src/components/messengerItems/messengerText.vue:
--------------------------------------------------------------------------------
1 |
95 |
96 |
97 |
55 |
56 |
57 |
66 |
67 |
68 |
85 |
69 |
81 |
70 |
80 |
71 |
73 |
74 |
79 |
75 | Facebook
76 |
77 | Send Message
78 |
82 |
84 |
140 |
141 |
142 |
173 |
174 |
177 |
178 |
179 |
102 | {{ localItems.number }}
103 |
104 |
105 |
106 |
114 |
115 | ![]()
130 |
135 |
136 |
137 |
142 |
143 |
144 |
152 |
153 |
154 |
155 |
156 |
188 |
189 |
192 |
193 |
102 | {{ localItems.number }}
103 |
104 |
105 |
106 |
114 |
115 | ![]()
131 |
137 |
138 |
143 |
144 |
145 |
150 |
151 |
152 |
160 |
161 |
162 |
163 |
164 |
196 |
197 |
200 |
201 |
202 |
96 |
172 |
173 |
174 |
281 |
--------------------------------------------------------------------------------
/src/components/customEdge.vue:
--------------------------------------------------------------------------------
1 |
219 |
220 |
225 |
226 |
227 |
97 |
98 |
99 |
112 |
113 |
114 |
171 |
115 |
131 |
116 |
130 |
126 |
128 | Starting Step
129 |
132 |
170 |
138 | {{ localStates.content }}
139 |
140 |
145 |
168 |
155 | {{ item.keyword }}
156 |
157 |
165 |
167 | Add Triggers
169 |
264 |
267 |
268 |
155 |
234 |
235 |
236 |
237 |
318 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
162 |
163 |
164 |
165 |
166 |
226 |
228 |
229 |
230 |
231 |
232 |
304 |
--------------------------------------------------------------------------------
/src/components/messengerItems/messengerCard.vue:
--------------------------------------------------------------------------------
1 |
135 |
136 |
137 |
169 |
172 |
222 |
223 |
224 |
225 |
145 | {{ localItems.number }}
146 |
147 |
148 |
149 |
150 |
158 |
159 | ![]()
185 |
192 |
193 |
194 |
195 |
310 |
311 |
201 | {{ localItems.title }}
202 |
203 |
204 |
205 |
206 |
213 |
214 |
215 |
216 |
224 |
225 |
226 |
227 |
228 |
252 |
253 |
260 |
261 |
262 |
263 |
264 |
296 |
297 |
308 |
309 |