OvidijusParsiunas · wongchichong · Aug 15, 2025 · Aug 15, 2025 · Aug 29, 2025 · Aug 29, 2025
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,10 @@
+# Normalize line endings
+* text=auto eol=lf
+
+# Define merge strategies for specific file types
+*.ts merge=union
+*.js merge=union
+*.json merge=union
+
+# Handle whitespace
+* whitespace=nowarn
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 dist
 bundle
 local_assets
-.vscode
+.vscode
+.crush
diff --git a/component/.prettierignore b/component/.prettierignore
@@ -0,0 +1,10 @@
+# Ignore CSS files as they may have specific formatting requirements
+*.css
+
+# Ignore minified files
+*.min.js
+*.min.css
+
+# Ignore build artifacts
+dist/
+build/
diff --git a/component/index.html b/component/index.html
@@ -1,43 +1,59 @@
 <!doctype html>
 
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Deep Chat Development</title>
-    <script type="module" src="src/deepChat.ts"></script>
-    <!-- https://deepchat.dev/examples/externalModules -->
-    <!-- Need this when using azure for speech to text -->
-    <!-- <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script> -->
-    <!-- Need this to highlight code -->
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> -->
-    <style>
-      html,
-      body {
-        height: 100%;
-        margin: 0px;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Attributes can be set as strings either directly on the element (demo/textInput) or via a `setAttribute` method on its reference (introMessage).
+
+<head>
+  <meta charset="utf-8" />
+  <title>Deep Chat Development</title>
+  <script type="module" src="src/deepChat.ts"></script>
+  <!-- https://deepchat.dev/examples/externalModules -->
+  <!-- Need this when using azure for speech to text -->
+  <!-- <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script> -->
+  <!-- Need this to highlight code -->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> -->
+  <style>
+    html,
+    body {
+      height: 100%;
+      margin: 0px;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- Attributes can be set as strings either directly on the element (demo/textInput) or via a `setAttribute` method on its reference (introMessage).
       When passing JSON objects make sure that they are first correctly stringified (use the following tool https://jsonlint.com/), functions assigned
       to properties must not have external references and all regex values are properly escaped.
       You can also pass values into the component via properties by using the element reference (history).
+
+      directConnection='{"openRouter":{"key": "sk-or-v1-", "model":"moonshotai/kimi-k2:free"}}' 
+    directConnection='{"openRouter":{"key": "sk-or-v1-", "model":"qwen/qwen2.5-vl-32b-instruct:free"}}'
+
+    connect='{"url": "http://localhost:8080/openrouter-chat", "headers":{ "Content-Type": "application/json"}}'
+
+    connect='{"url": "http://127.0.0.1:5001/firebasefunctions/us-central1/api/openrouter-chat", "headers":{ "Content-Type": "application/json"}}'
+
+    {"messages":[{"role":"user","text":"hi"}],"model":"moonshotai/kimi-k2:free"}
+
       -->
-    <deep-chat id="chat-element" demo="true" textInput='{"placeholder":{"text": "Welcome to the demo!"}}'></deep-chat>
-    <script type="module">
-      const chatElementRef = document.getElementById('chat-element');
-      // Setting value via a property (easiest way)
-      chatElementRef.history = [
-        {role: 'user', text: 'Hey, how are you today?'},
-        {role: 'ai', text: 'I am doing very well!'},
-      ];
-      chatElementRef.setAttribute(
-        'introMessage',
-        JSON.stringify({
-          text: 'You are now running deep chat locally.',
-        })
-      );
-    </script>
-  </body>
-</html>
+  <deep-chat id="chat-element"
+    connect='{"url": "http://localhost:8080/openrouter-chat", "headers":{ "Content-Type": "application/json"}}'
+    images="true" camera="true" gifs="true" audio="true" microphone="true" mixedFiles="true"
+    textInput='{"placeholder":{"text": "Welcome to the demo!"}}'></deep-chat>
+  <script type="module">
+    const chatElementRef = document.getElementById('chat-element');
+    // Setting value via a property (easiest way)
+    chatElementRef.history = [
+      { role: 'user', text: 'Hey, how are you today?' },
+      { role: 'ai', text: 'I am doing very well!' },
+    ];
+    chatElementRef.setAttribute(
+      'introMessage',
+      JSON.stringify({
+        text: 'You are now running deep chat locally.',
+      })
+    );
+  </script>
+</body>
+
+</html>
diff --git a/component/package.json b/component/package.json
@@ -12,6 +12,7 @@
     "build:bundle": "npm run lint && tsc && vite build && npm run analyze && rollup -c && npm run build:babel",
     "analyze": "cem analyze --globs \"src/**/*.ts\"",
     "lint": "eslint --parser-options '{'project':'./tsconfig.json'}' 'src/**/*.ts'",
+    "format": "prettier --write 'src/**/*.{ts,js,json,md}' --ignore-unknown",
     "build:babel": "npm run build:temp && npm run transpile && rimraf dist/deepChatTemp.js",
     "build:temp": "cp dist/deepChat.js dist/deepChatTemp.js && rimraf dist/deepChat.js",
     "transpile": "babel dist/deepChatTemp.js --out-file dist/deepChat.js"
@@ -69,9 +70,18 @@
     "assets/**/*",
     "custom-elements.json"
   ],
+  "prettier": {
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "useTabs": false,
+    "printWidth": 123,
+    "bracketSpacing": false
+  },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
     "remarkable": "^2.0.1",
     "speech-to-element": "^1.0.4"
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ node_modules @@
     dist
     bundle
     local_assets
-    .vscode
+    .vscode
+    .crush