Added Email, Contacts and ChatGPT

.wundergraph/operations/Dragons.graphql

@@ -1,6 +0,0 @@
-query Dragons {
-	spacex_dragons {
-		name
-		active
-	}
-}

.wundergraph/operations/Me.graphql

@@ -0,0 +1,11 @@
+query {
+  system_db_users_me {
+    id
+    first_name
+    last_name
+    avatar {
+      id
+    }
+    external_identifier
+  }
+}

.wundergraph/operations/getBalance.ts

@@ -6,15 +6,15 @@ export default createOperation.query({
     address: z.string(),
   }),
   handler: async ({ input }) => {
-    console.log('Making request with input:', input); // Log the input
+    console.log('Making request with input:', input);
 
     const { data } = await axios.get('https://api.gnosisscan.io/api', {
       params: {
         module: 'account',
         action: 'balance',
         address: input.address,
-        // tag: 'latest',
+        tag: 'latest',
-        // apikey: process.env.GNOSISSCAN_API,
+        apikey: process.env.GNOSISSCAN_API,
       },
       timeout: 10000,
     });

.wundergraph/operations/getChatwootContacts.ts

@@ -0,0 +1,20 @@
+// .wundergraph/operations/getChatwootContacts.ts
+import { createOperation, z } from '../generated/wundergraph.factory';
+import axios from 'axios';
+
+export default createOperation.query({
+    input: z.object({
+        page: z.number().optional(),
+    }),
+    handler: async ({ page = 1 }) => {
+        console.log('Making request to Chatwoot API');
+
+        const { data } = await axios.get(`https://chatwoot.andert.me/api/v1/accounts/1/contacts?page=${page}`, {
+            headers: {
+                api_access_token: process.env.CHATWOOT_API_ACCESS_TOKEN
+            },
+        });
+
+        return data;
+    },
+});

.wundergraph/operations/getChatwootConversations.ts

@@ -0,0 +1,19 @@
+// .wundergraph/operations/getChatwootConversations.ts
+import { createOperation, z } from '../generated/wundergraph.factory';
+import axios from 'axios';
+
+export default createOperation.query({
+    input: z.object({}),
+    handler: async () => {
+        console.log('Making request to Chatwoot API');
+
+        const { data } = await axios.get('https://chatwoot.andert.me/api/v1/accounts/1/conversations?status=open&sort_by=last_activity_at', {
+            headers: {
+                api_access_token: process.env.CHATWOOT_API_ACCESS_TOKEN
+            },
+        });
+
+
+        return data;
+    },
+});

.wundergraph/operations/getPaperless.ts

@@ -0,0 +1,63 @@
+// .wundergraph/operations/getPaperless.ts
+import { createOperation, z } from '../generated/wundergraph.factory';
+import axios from 'axios';
+
+export default createOperation.query({
+    input: z.object({}),
+    handler: async () => {
+        console.log('Making request to Paperless API');
+        const { data } = await axios.get('https://paperless.andert.me/api/documents/', {
+            headers: {
+                Authorization: process.env.PAPERLESS_TOKEN,
+            },
+
+        });
+
+
+        // Add download link, thumbnail link, preview link, PDF data, and metadata to each document
+        const documentsWithLinksDataAndMetadata = await Promise.all(data.results.map(async doc => {
+            const response = await axios.get(`https://paperless.andert.me/api/documents/${doc.id}/preview/`, {
+                responseType: 'arraybuffer',
+                headers: {
+                    Authorization: process.env.PAPERLESS_TOKEN,
+                },
+            });
+
+            const pdfData = Buffer.from(response.data, 'binary').toString('base64');
+
+            const correspondentResponse = await axios.get(`https://paperless.andert.me/api/correspondents/${doc.correspondent}/`, {
+                headers: {
+                    Authorization: process.env.PAPERLESS_TOKEN,
+                },
+            });
+            const correspondent = correspondentResponse.data;
+
+            const tagsResponse = await Promise.all(doc.tags.map(tag => axios.get(`https://paperless.andert.me/api/tags/${tag}/`, {
+                headers: {
+                    Authorization: process.env.PAPERLESS_TOKEN,
+                },
+            })));
+            const tags = tagsResponse.map(response => response.data);
+
+            const documentTypeResponse = await axios.get(`https://paperless.andert.me/api/document_types/${doc.document_type}/`, {
+                headers: {
+                    Authorization: process.env.PAPERLESS_TOKEN,
+                },
+            });
+            const documentType = documentTypeResponse.data;
+
+            return {
+                ...doc,
+                downloadLink: `https://paperless.andert.me/api/documents/${doc.id}/download/`,
+                thumbnailLink: `https://paperless.andert.me/api/documents/${doc.id}/thumb/`,
+                previewLink: `https://paperless.andert.me/api/documents/${doc.id}/preview/`,
+                pdfData,
+                correspondent,
+                tags,
+                document_type: documentType,
+            };
+        }));
+
+        return documentsWithLinksDataAndMetadata;
+    },
+});

.wundergraph/schemas/directus.graphql

@@ -2,41 +2,40 @@ type Query {
   projects(filter: projects_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [projects!]!
   projects_by_id(id: ID!): projects
   projects_aggregated(groupBy: [String], filter: projects_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [projects_aggregated!]!
-  todos(filter: todos_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [todos!]!
-  todos_by_id(id: ID!): todos
-  todos_aggregated(groupBy: [String], filter: todos_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [todos_aggregated!]!
   bookmarks(filter: bookmarks_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [bookmarks!]!
   bookmarks_by_id(id: ID!): bookmarks
   bookmarks_aggregated(groupBy: [String], filter: bookmarks_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [bookmarks_aggregated!]!
+  todos(filter: todos_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [todos!]!
+  todos_by_id(id: ID!): todos
+  todos_aggregated(groupBy: [String], filter: todos_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [todos_aggregated!]!
 }
 
 type Mutation {
   create_projects_items(filter: projects_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_projects_input!]): [projects!]!
   create_projects_item(data: create_projects_input!): projects
-  create_todos_items(filter: todos_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_todos_input!]): [todos!]!
-  create_todos_item(data: create_todos_input!): todos
   create_bookmarks_items(filter: bookmarks_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_bookmarks_input!]): [bookmarks!]!
   create_bookmarks_item(data: create_bookmarks_input!): bookmarks
+  create_todos_items(filter: todos_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_todos_input!]): [todos!]!
+  create_todos_item(data: create_todos_input!): todos
   update_projects_items(filter: projects_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_projects_input!): [projects!]!
   update_projects_batch(filter: projects_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_projects_input!]): [projects!]!
   update_projects_item(id: ID!, data: update_projects_input!): projects
-  update_todos_items(filter: todos_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_todos_input!): [todos!]!
-  update_todos_batch(filter: todos_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_todos_input!]): [todos!]!
-  update_todos_item(id: ID!, data: update_todos_input!): todos
   update_bookmarks_items(filter: bookmarks_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_bookmarks_input!): [bookmarks!]!
   update_bookmarks_batch(filter: bookmarks_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_bookmarks_input!]): [bookmarks!]!
   update_bookmarks_item(id: ID!, data: update_bookmarks_input!): bookmarks
+  update_todos_items(filter: todos_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_todos_input!): [todos!]!
+  update_todos_batch(filter: todos_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_todos_input!]): [todos!]!
+  update_todos_item(id: ID!, data: update_todos_input!): todos
   delete_projects_items(ids: [ID]!): delete_many
   delete_projects_item(id: ID!): delete_one
-  delete_todos_items(ids: [ID]!): delete_many
-  delete_todos_item(id: ID!): delete_one
   delete_bookmarks_items(ids: [ID]!): delete_many
   delete_bookmarks_item(id: ID!): delete_one
+  delete_todos_items(ids: [ID]!): delete_many
+  delete_todos_item(id: ID!): delete_one
 }
 
 type Subscription {
   projects_mutated(event: EventEnum): projects_mutated
-  todos_mutated(event: EventEnum): todos_mutated
   directus_dashboards_mutated(event: EventEnum): directus_dashboards_mutated
   directus_activity_mutated(event: EventEnum): directus_activity_mutated
   directus_notifications_mutated(event: EventEnum): directus_notifications_mutated
@@ -55,6 +54,7 @@ type Subscription {
   directus_shares_mutated(event: EventEnum): directus_shares_mutated
   directus_webhooks_mutated(event: EventEnum): directus_webhooks_mutated
   bookmarks_mutated(event: EventEnum): bookmarks_mutated
+  todos_mutated(event: EventEnum): todos_mutated
 }
 
 """The `Boolean` scalar type represents `true` or `false`."""
@@ -620,15 +620,16 @@ type projects_mutated {
 
 type todos {
   id: ID!
-  status: String
-  sort: Int
   user_created(filter: directus_users_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_users
   date_created: Date
   date_created_func: datetime_functions
   user_updated(filter: directus_users_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_users
   date_updated: Date
   date_updated_func: datetime_functions
+  enddate: Date
+  enddate_func: datetime_functions
   task: String
+  type: String
 }
 
 type todos_aggregated {
@@ -636,27 +637,17 @@ type todos_aggregated {
   countAll: Int
   count: todos_aggregated_count
   countDistinct: todos_aggregated_count
-  avg: todos_aggregated_fields
-  sum: todos_aggregated_fields
-  avgDistinct: todos_aggregated_fields
-  sumDistinct: todos_aggregated_fields
-  min: todos_aggregated_fields
-  max: todos_aggregated_fields
 }
 
 type todos_aggregated_count {
   id: Int
-  status: Int
-  sort: Int
   user_created: Int
   date_created: Int
   user_updated: Int
   date_updated: Int
+  enddate: Int
   task: Int
-}
+  type: Int
-
-type todos_aggregated_fields {
-  sort: Float
 }
 
 type todos_mutated {
@@ -786,13 +777,13 @@ input create_projects_input {
 
 input create_todos_input {
   id: ID
-  status: String
-  sort: Int
   user_created: create_directus_users_input
   date_created: Date
   user_updated: create_directus_users_input
   date_updated: Date
+  enddate: Date
   task: String
+  type: String
 }
 
 input date_filter_operators {
@@ -1073,15 +1064,16 @@ input string_filter_operators {
 
 input todos_filter {
   id: string_filter_operators
-  status: string_filter_operators
-  sort: number_filter_operators
   user_created: directus_users_filter
   date_created: date_filter_operators
   date_created_func: datetime_function_filter_operators
   user_updated: directus_users_filter
   date_updated: date_filter_operators
   date_updated_func: datetime_function_filter_operators
+  enddate: date_filter_operators
+  enddate_func: datetime_function_filter_operators
   task: string_filter_operators
+  type: string_filter_operators
   _and: [todos_filter]
   _or: [todos_filter]
 }
@@ -1178,11 +1170,11 @@ input update_projects_input {
 
 input update_todos_input {
   id: ID
-  status: String
-  sort: Int
   user_created: update_directus_users_input
   date_created: Date
   user_updated: update_directus_users_input
   date_updated: Date
+  enddate: Date
   task: String
+  type: String
 }

.wundergraph/schemas/directus_system.graphql

@@ -199,7 +199,6 @@ type Mutation {
 
 type Subscription {
   projects_mutated(event: EventEnum): projects_mutated
-  todos_mutated(event: EventEnum): todos_mutated
   directus_dashboards_mutated(event: EventEnum): directus_dashboards_mutated
   directus_activity_mutated(event: EventEnum): directus_activity_mutated
   directus_notifications_mutated(event: EventEnum): directus_notifications_mutated
@@ -218,6 +217,7 @@ type Subscription {
   directus_shares_mutated(event: EventEnum): directus_shares_mutated
   directus_webhooks_mutated(event: EventEnum): directus_webhooks_mutated
   bookmarks_mutated(event: EventEnum): bookmarks_mutated
+  todos_mutated(event: EventEnum): todos_mutated
 }
 
 """The `Boolean` scalar type represents `true` or `false`."""
@@ -1392,15 +1392,16 @@ type server_info_websocket_rest {
 
 type todos {
   id: ID!
-  status: String
-  sort: Int
   user_created(filter: directus_users_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_users
   date_created: Date
   date_created_func: datetime_functions
   user_updated(filter: directus_users_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_users
   date_updated: Date
   date_updated_func: datetime_functions
+  enddate: Date
+  enddate_func: datetime_functions
   task: String
+  type: String
 }
 
 type todos_mutated {

.wundergraph/schemas/placeholder.json

@@ -0,0 +1,181 @@
+{
+    "openapi": "3.0.0",
+    "info": {
+        "version": "1.0.0",
+        "title": "JSON Placeholder API",
+        "description": "See https://jsonplaceholder.typicode.com/"
+    },
+    "servers": [
+        {
+            "url": "https://jsonplaceholder.typicode.com"
+        }
+    ],
+    "paths": {
+        "/posts": {
+            "get": {
+                "description": "Returns all posts",
+                "tags": [
+                    "Posts"
+                ],
+                "operationId": "getPosts",
+                "responses": {
+                    "200": {
+                        "description": "Successful response",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/PostsList"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/users": {
+            "get": {
+                "description": "Returns all users",
+                "tags": [
+                    "Users"
+                ],
+                "operationId": "getUsers",
+                "responses": {
+                    "200": {
+                        "description": "Successful response",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/UserList"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "/users/{id}": {
+            "get": {
+                "description": "Returns a user by id",
+                "tags": [
+                    "Users"
+                ],
+                "operationId": "getUser",
+                "parameters": [
+                    {
+                        "name": "id",
+                        "in": "path",
+                        "required": true,
+                        "description": "The user id.",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Successful response",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/User"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "User not found"
+                    }
+                }
+            }
+        },
+        "/posts/{id}": {
+            "get": {
+                "description": "Returns a post by id",
+                "tags": [
+                    "Posts"
+                ],
+                "operationId": "getPost",
+                "parameters": [
+                    {
+                        "name": "id",
+                        "in": "path",
+                        "required": true,
+                        "description": "The user id.",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "Successful response",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/Post"
+                                }
+                            }
+                        }
+                    },
+                    "404": {
+                        "description": "Post not found"
+                    }
+                }
+            }
+        }
+    },
+    "components": {
+        "schemas": {
+            "PostsList": {
+                "type": "array",
+                "items": {
+                    "$ref": "#/components/schemas/Post"
+                }
+            },
+            "UserList": {
+                "type": "array",
+                "items": {
+                    "$ref": "#/components/schemas/User"
+                }
+            },
+            "Post": {
+                "type": "object",
+                "required": [
+                    "id",
+                    "userId",
+                    "title"
+                ],
+                "properties": {
+                    "id": {
+                        "type": "integer"
+                    },
+                    "userId": {
+                        "type": "integer"
+                    },
+                    "title": {
+                        "type": "string"
+                    }
+                }
+            },
+            "User": {
+                "type": "object",
+                "properties": {
+                    "id": {
+                        "type": "integer"
+                    },
+                    "name": {
+                        "type": "string"
+                    },
+                    "username": {
+                        "type": "string"
+                    },
+                    "email": {
+                        "type": "string"
+                    }
+                }
+            }
+        }
+    }
+}

.wundergraph/wundergraph.config.ts

@@ -9,11 +9,6 @@ dotenv.config();
 const directusSchema = fs.readFileSync(path.join(path.resolve(), './schemas/directus.graphql'), 'utf8');
 const directusSystemSchema = fs.readFileSync(path.join(path.resolve(), './schemas/directus_system.graphql'), 'utf8');
 
-const spaceX = introspect.graphql({
-	apiNamespace: 'spacex',
-	url: 'https://spacex-api.fly.dev/graphql/',
-});
-
 const db = introspect.graphql({
 	apiNamespace: 'db',
 	loadSchemaFromString: directusSchema,
@@ -22,6 +17,15 @@ const db = introspect.graphql({
 		.addStaticHeader('Authorization', new EnvironmentVariable('DIRECTUS', process.env.DIRECTUS))
 });
 
+const placeholder = introspect.openApiV2({
+	apiNamespace: 'placeholder',
+	source: {
+		kind: "file",
+		filePath: "./schemas/placeholder.json"
+	},
+	baseURL: 'https://jsonplaceholder.typicode.com',
+});
+
 const system_db = introspect.graphql({
 	apiNamespace: 'system_db',
 	loadSchemaFromString: directusSystemSchema,
@@ -32,7 +36,7 @@ const system_db = introspect.graphql({
 
 // configureWunderGraph emits the configuration
 configureWunderGraphApplication({
-	apis: [spaceX, db, system_db],
+	apis: [db, system_db, placeholder],
 	server,
 	operations,
 	generate: {

package.json

@@ -22,7 +22,7 @@
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.5.0",
     "@tailwindcss/forms": "^0.5.6",
-    "@tauri-apps/cli": "^1.4.0",
+    "@tauri-apps/cli": "2.0.0-alpha.14",
     "@types/cookie": "^0.5.1",
     "@types/js-cookie": "^3.0.3",
     "@types/jsonwebtoken": "^9.0.2",
@@ -58,6 +58,7 @@
     "@wundergraph/sdk": "^0.174.5",
     "@wundergraph/svelte-query": "^0.3.10",
     "@xstate/svelte": "^2.1.0",
+    "ai": "^2.2.13",
     "axios": "^1.4.0",
     "cookie": "^0.5.0",
     "dotenv": "^16.3.1",
@@ -67,9 +68,11 @@
     "jsonwebtoken": "^9.0.1",
     "jwks-rsa": "^3.0.1",
     "node-jose": "^2.2.0",
+    "openai": "^4.8.0",
     "path": "^0.12.7",
     "sqlite3": "^5.1.6",
     "svelte-kit-cookie-session": "^4.0.0",
+    "svelte-pdf-simple": "^2.0.0",
     "url": "^0.11.1",
     "xstate": "^4.38.2"
   },

src/lib/Ai.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { useChat } from "ai/svelte";
+  import Icon from "@iconify/svelte";
+
+  const { input, handleSubmit, messages } = useChat();
+</script>
+
+<div class="chat-grid h-full p-4">
+  <ul class="overflow-auto flex flex-col p-4 text-sm">
+    {#each $messages as message}
+      <li class="message {message.role === 'user' ? 'user' : 'assistant'} p-2">
+        {message.content}
+      </li>
+    {/each}
+  </ul>
+  <div class="w-full">
+    <form on:submit={handleSubmit} class="flex items-center">
+      <input bind:value={$input} class="input flex-grow mr-4" type="text" />
+      <button class="btn-icon variant-filled-success" type="submit">
+        <div class="px-4">
+          <Icon icon="carbon:send-alt-filled" class="" width="24" height="24" />
+        </div>
+      </button>
+    </form>
+  </div>
+</div>
+
+<style>
+  .chat-grid {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    height: 100%;
+  }
+  .message {
+    max-width: 80%;
+    padding: px;
+    margin: 10px;
+    border-radius: 10px;
+  }
+  .user {
+    align-self: flex-end;
+    background-color: #0d6efd;
+    color: white;
+  }
+  .assistant {
+    align-self: flex-start;
+    background-color: lightblue;
+  }
+</style>

src/lib/JsonViewer.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let json;
+</script>
+
+<pre>{JSON.stringify(json, null, 2)}</pre>

src/lib/MailViewer.svelte

@@ -0,0 +1,14 @@
+<script>
+  function shadowroot(node, { html }) {
+    node.attachShadow({ mode: "open" }).innerHTML = html;
+    return {
+      update({ html }) {
+        node.shadowRoot.innerHTML = html;
+      },
+    };
+  }
+
+  export let html = "<h1>Some custom HTML</h1>";
+</script>
+
+<div use:shadowroot={{ html }} />

src/lib/Wallet.svelte

@@ -96,19 +96,6 @@
           </aside>
           <div class="col-span-5 w-full">
             <div class="flex justify-end space-x-4">
-              <div class="w-full">
-                <input bind:value={search} class="input" type="text" />
-              </div>
-              <button type="button" class="btn-icon variant-filled-success">
-                <div class="px-4">
-                  <Icon
-                    icon="carbon:send-alt-filled"
-                    class=""
-                    width="24"
-                    height="24"
-                  />
-                </div>
-              </button>
               <button
                 on:click={signRequestTrigger}
                 type="button"

src/lib/mockApps.js

@@ -0,0 +1,8 @@
+export const mockApps = [
+    {  name: 'cloud' },
+    { name: 'pass'},
+    {  name: 'directus' },
+    { name: 'penpot'},
+    { name: 'paperless'}
+  ];
+  

src/routes/+layout.svelte

@@ -55,22 +55,31 @@
     <!-- (fallback contents) -->
   {/if}</Drawer
 >
-
+<div class="grid h-screen grid-layout bg-color">
-<div class="grid h-screen grid-rows-layout bg-color">
+  <QueryClientProvider client={data.queryClient} class="main">
-  <QueryClientProvider client={data.queryClient}>
     <slot />
   </QueryClientProvider>
 
-  <div class="row-start-2 row-end-3">
+  <footer>
     <Wallet />
-  </div>
+  </footer>
 </div>
 
 <style>
   .bg-color {
     background-color: #e6e7e1;
   }
-  .grid-rows-layout {
+  .grid-layout {
+    grid-template-areas:
+      "main "
+      "footer ";
     grid-template-rows: 1fr auto;
   }
+  .main {
+    grid-area: main;
+  }
+
+  footer {
+    grid-area: footer;
+  }
 </style>

src/routes/api/chat/+server.ts

@@ -0,0 +1,34 @@
+import OpenAI from 'openai';
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+import { env } from '$env/dynamic/private';
+// You may want to replace the above with a static private env variable
+// for dead-code elimination and build-time type-checking:
+// import { OPENAI_API_KEY } from '$env/static/private'
+
+import type { RequestHandler } from './$types';
+
+// Create an OpenAI API client
+const openai = new OpenAI({
+  apiKey: env.OPENAI_API_KEY || '',
+});
+
+export const POST = (async ({ request }) => {
+  // Extract the `prompt` from the body of the request
+  const { messages } = await request.json();
+
+  // Ask OpenAI for a streaming chat completion given the prompt
+  const response = await openai.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    stream: true,
+    messages: messages.map((message: any) => ({
+      content: message.content,
+      role: message.role,
+    })),
+  });
+
+  // Convert the response into a friendly text-stream
+  const stream = OpenAIStream(response);
+  // Respond with the stream
+  return new StreamingTextResponse(stream);
+}) satisfies RequestHandler;

src/routes/me/+layout.svelte

@@ -1,14 +1,85 @@
+<script>
+  import Icon from "@iconify/svelte";
+</script>
+
 <div class="w-full h-full overflow-hidden grid grid-cols-6">
   <aside class="col-span-1">
-    <nav class="list-nav p-6">
+    <nav class="list-nav p-2">
       <h3 class="text-xl font-bold mb-4">MY HOME</h3>
       <ul>
-        <li><a href="/me">Dashboard</a></li>
+        <li>
-        <li><a href="/me/projects">My Projects</a></li>
+          <a href="/me">
-        <li><a href="/me/documents">My Documents</a></li>
+            <Icon
-        <li><a href="/me/banking">Banking</a></li>
+              icon="iconamoon:profile-circle-fill"
-        <li><a href="/me/bookmarks">Bookmarks</a></li>
+              class="w-8 h-8 text-gray-500"
-        <li><a href="/me/acc">Access Control</a></li>
+            />
+            Dashboard
+          </a>
+        </li>
+        <li>
+          <a href="/me/projects">
+            <Icon
+              icon="iconamoon:profile-circle-fill"
+              class="w-8 h-8 text-gray-500"
+            />
+            My Projects
+          </a>
+        </li>
+
+        <li>
+          <a href="/me/contacts">
+            <Icon
+              icon="iconamoon:profile-circle-fill"
+              class="w-8 h-8 text-gray-500"
+            />
+            Contacts
+          </a>
+        </li>
+        <li>
+          <a href="/me/conversations">
+            <Icon
+              icon="iconamoon:profile-circle-fill"
+              class="w-8 h-8 text-gray-500"
+            />
+            Email
+          </a>
+        </li>
+        <li>
+          <a href="/me/chatGPT">
+            <Icon
+              icon="iconamoon:profile-circle-fill"
+              class="w-8 h-8 text-gray-500"
+            />
+            ChatGPT
+          </a>
+        </li>
+        <li>
+          <a href="/me/banking">
+            <Icon
+              icon="iconamoon:profile-circle-fill"
+              class="w-8 h-8 text-gray-500"
+            />
+            Banking
+          </a>
+        </li>
+        <li>
+          <a href="/me/paperless">
+            <Icon
+              icon="iconamoon:profile-circle-fill"
+              class="w-8 h-8 text-gray-500"
+            />
+            Paperless
+          </a>
+        </li>
+        <li>
+          <a href="/me/acc">
+            <Icon
+              icon="iconamoon:profile-circle-fill"
+              class="w-8 h-8 text-gray-500"
+            />
+            Access Control
+          </a>
+        </li>
       </ul>
     </nav>
   </aside>
@@ -16,3 +87,9 @@
     <slot />
   </div>
 </div>
+
+<style>
+  .collapsed {
+    width: 3rem; /* Adjust as needed */
+  }
+</style>

src/routes/me/+page.svelte

@@ -1,11 +1,47 @@
-<script>
+<script lang="ts">
   import HeaderMain from "$lib/layouts/HeaderMain.svelte";
+  import { createQuery } from "../../lib/wundergraph";
+  import { Avatar } from "@skeletonlabs/skeleton";
+
+  const meQuery = createQuery({
+    operationName: "Me",
+  });
 </script>
 
 <HeaderMain>
   <div slot="header">
-    <h1>Dashboard</h1>
+    <h1>Profile</h1>
   </div>
 
-  <div slot="main">Welcome back, Samuel this is your Dashboard</div>
+  <div slot="main" class="h-full w-full overflow-scroll">
+    <div class="w-full h-full overflow-scroll">
+      {#if $meQuery.isLoading}
+        <p>Loading...</p>
+      {:else if $meQuery.error}
+        <pre>Error: {JSON.stringify($meQuery.error, null, 2)}</pre>
+      {:else}
+        <div class="container mx-auto p-8 space-y-8">
+          <div class="flex items-center space-x-4">
+            <Avatar
+              class="rounded-full w-24"
+              src={`https://directus.andert.me/assets/${
+                $meQuery.data.system_db_users_me?.avatar.id
+              }?access_token=${
+                import.meta.env.VITE_DIRECTUS_TEMPORARY_ACCESS_TOKEN
+              }`}
+            />
+            <div>
+              <h3 class="h3">Welcome back</h3>
+              <h2 class="h2">
+                {$meQuery.data.system_db_users_me?.first_name}
+                {$meQuery.data.system_db_users_me?.last_name}
+              </h2>
+              {$meQuery.data.system_db_users_me?.external_identifier}
+              <p />
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
 </HeaderMain>

src/routes/me/apps/+page.svelte

@@ -0,0 +1,13 @@
+<!-- src/routes/apps/+page.svelte -->
+<script>
+  import { mockApps } from "$lib/mockApps.js";
+</script>
+
+<h1>Apps List</h1>
+<ul>
+  {#each mockApps as app}
+    <li>
+      <a href="/me/apps/{app.name}">{app.name}</a>
+    </li>
+  {/each}
+</ul>

src/routes/me/apps/[name]/+page.js

@@ -0,0 +1,12 @@
+import { mockApps } from '$lib/mockApps';
+
+export function load({ params }) {
+    const { name } = params;
+    const app = mockApps.find(a => a.name == name);
+
+    if (app) {
+        return { props: { app } };
+    }
+    
+    return { status: 404 };
+}

src/routes/me/apps/[name]/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+  /** @type {import('./$types').PageData} */
+  export let data;
+</script>
+
+<iframe
+  src={`https://${data.props.app.name}.andert.me`}
+  width="100%"
+  height="100%"
+/>

src/routes/me/chatGPT/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Ai from "$lib/Ai.svelte";
+</script>
+
+<Ai />

src/routes/me/contacts/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import JsonViewer from "$lib/JsonViewer.svelte";
+  import HeaderMain from "$lib/layouts/HeaderMain.svelte";
+  import { createQuery } from "../../../lib/wundergraph";
+
+  const contactsQuery = createQuery({
+    operationName: "getChatwootContacts",
+    variables: { page: 2 },
+  });
+</script>
+
+<HeaderMain>
+  <div slot="header">
+    <h1>Contacts</h1>
+  </div>
+
+  <div slot="main" class="h-full w-full overflow-scroll">
+    <div class="w-full h-full overflow-scroll">
+      {#if $contactsQuery.isLoading}
+        <p>Loading...</p>
+      {:else if $contactsQuery.error}
+        <pre>Error: {JSON.stringify($contactsQuery.error, null, 2)}</pre>
+      {:else}
+        <div class="grid grid-cols-3 gap-4">
+          {#each $contactsQuery.data.payload as contact (contact.id)}
+            <div class="card">
+              <header class="card-header">{contact.name}</header>
+              <section class="p-4">
+                ID: {contact.id}<br />{contact.email}
+              </section>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+</HeaderMain>

src/routes/me/conversations/+page.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import MailViewer from "$lib/MailViewer.svelte";
+  import { createQuery } from "../../../lib/wundergraph";
+  import JsonViewer from "$lib/JsonViewer.svelte";
+
+  const conversationsQuery = createQuery({
+    operationName: "getChatwootConversations",
+  });
+
+  let selectedConversation = null;
+  function selectConversation(conversation) {
+    selectedConversation = conversation;
+  }
+
+  $: if ($conversationsQuery.data && !selectedConversation) {
+    selectedConversation = $conversationsQuery.data.data.payload[0];
+  }
+</script>
+
+<div class="h-full w-full overflow-scroll flex">
+  <div class="w-1/3 h-full overflow-scroll">
+    {#if $conversationsQuery.isLoading}
+      <p>Loading...</p>
+    {:else if $conversationsQuery.error}
+      Error: <JsonViewer json="$conversationsQuery.error}" />
+    {:else}
+      {#each $conversationsQuery.data.data.payload as conversation (conversation.id)}
+        <div
+          class="m-1 p-2 border border-gray-200 rounded-md hover:bg-gray-100 cursor-pointer"
+          on:click={() => selectConversation(conversation)}
+        >
+          <h2 class="text-lg font-semibold">
+            {conversation.meta.sender.name}
+          </h2>
+          <p>{conversation.messages[0].content.slice(0, 100)}...</p>
+        </div>
+      {/each}
+    {/if}
+  </div>
+  <div class="w-2/3 h-full overflow-scroll relative">
+    {#if selectedConversation}
+      <div class="p-4 bg-white z-10 sticky top-0 left-0">
+        <h2 class="font-bold text-xl">
+          {selectedConversation.meta.sender.name}
+        </h2>
+        <p>
+          {selectedConversation.id} - {selectedConversation.meta.sender.email}
+        </p>
+      </div>
+
+      <div class="space-y-4 px-4">
+        {#each selectedConversation.messages as message (message.id)}
+          {#if message.content_type == "incoming_email"}
+            {#if selectedConversation.last_non_activity_message.content != message.content}
+              <MailViewer
+                html={selectedConversation.last_non_activity_message
+                  .content_attributes.email.html_content.full}
+              />{/if}
+            <MailViewer
+              html={message.content_attributes.email.html_content.full}
+            />
+          {:else}
+            {#if selectedConversation.last_non_activity_message.content != message.content}{selectedConversation
+                .last_non_activity_message.content}{/if}
+            <p class="bg-slate-400 py-1 px-2 rounded-sm my-2">
+              {message.content}
+            </p>
+          {/if}
+        {/each}
+      </div>
+    {:else}
+      <p>Select a conversation to view its details.</p>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .btn {
+    display: inline-block;
+    padding: 0.5em 1em;
+    background-color: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 0.25em;
+  }
+</style>

src/routes/me/paperless/+page.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import HeaderMain from "$lib/layouts/HeaderMain.svelte";
+  import { createQuery } from "../../../lib/wundergraph";
+
+  const paperlessQuery = createQuery({
+    operationName: "getPaperless",
+  });
+
+  let pdfDataUrls = [];
+  let selectedPdfUrl = null;
+
+  $: if ($paperlessQuery.data) {
+    pdfDataUrls = $paperlessQuery.data.map((document) => {
+      const pdfData = atob(document.pdfData);
+      const pdfDataArray = new Uint8Array(pdfData.length);
+      for (let i = 0; i < pdfData.length; i++) {
+        pdfDataArray[i] = pdfData.charCodeAt(i);
+      }
+      const blob = new Blob([pdfDataArray], { type: "application/pdf" });
+      return URL.createObjectURL(blob);
+    });
+  }
+
+  function selectPdf(i) {
+    selectedPdfUrl = pdfDataUrls[i];
+  }
+</script>
+
+<HeaderMain>
+  <!-- <div slot="header">
+    <h1>Paperless Documents</h1>
+  </div> -->
+
+  <div slot="main" class="h-full w-full overflow-scroll flex">
+    <div class="w-1/4 h-full overflow-scroll">
+      {#if $paperlessQuery.isLoading}
+        <p>Loading...</p>
+      {:else if $paperlessQuery.error}
+        <pre>Error: {JSON.stringify($paperlessQuery.error, null, 2)}</pre>
+      {:else}
+        {#each $paperlessQuery.data as document, i}
+          <a href="#" on:click|preventDefault={() => selectPdf(i)}>
+            <div
+              class="my-4 p-2 border border-gray-200 rounded-md hover:bg-gray-100 cursor-pointer"
+            >
+              <h2 class="text-lg font-semibold">
+                {document.archived_file_name}
+              </h2>
+              <p>Correspondent: {document.correspondent.name}</p>
+              <p>Tags: {document.tags.map((tag) => tag.name).join(", ")}</p>
+              <p>{document.document_type.name}</p>
+            </div>
+          </a>
+        {/each}
+      {/if}
+    </div>
+    <div class="w-3/4 h-full overflow-scroll">
+      {#if selectedPdfUrl}
+        <object
+          data={selectedPdfUrl}
+          type="application/pdf"
+          width="100%"
+          height="100%"
+        />
+      {/if}
+    </div>
+  </div>
+</HeaderMain>

src/routes/server/api/chat/+server.ts

@@ -0,0 +1,34 @@
+import OpenAI from 'openai';
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+import { env } from '$env/dynamic/private';
+// You may want to replace the above with a static private env variable
+// for dead-code elimination and build-time type-checking:
+// import { OPENAI_API_KEY } from '$env/static/private'
+
+import type { RequestHandler } from '../../server/api/chat/$types';
+
+// Create an OpenAI API client
+const openai = new OpenAI({
+  apiKey: env.OPENAI_API_KEY || '',
+});
+
+export const POST = (async ({ request }) => {
+  // Extract the `prompt` from the body of the request
+  const { messages } = await request.json();
+
+  // Ask OpenAI for a streaming chat completion given the prompt
+  const response = await openai.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    stream: true,
+    messages: messages.map((message: any) => ({
+      content: message.content,
+      role: message.role,
+    })),
+  });
+
+  // Convert the response into a friendly text-stream
+  const stream = OpenAIStream(response);
+  // Respond with the stream
+  return new StreamingTextResponse(stream);
+}) satisfies RequestHandler;