@mixd-id/web-scaffold 0.2.250801009 → 0.2.250801010

package/src/widgets/WebPageBuilder.vue

@@ -6,7 +6,7 @@
 
     <div class="flex-1 flex flex-col bg-base-400">
 
-      <div class="p-3 pr-5 flex justify-center gap-4 bg-base-400 border-b-[1px] border-border-50">
+      <div class="p-3 pr-5 flex justify-center gap-4 border-b-[1px] border-border-50">
         <div class="flex-1 flex flex-row gap-4 items-center"
              @click.meta="log(page)"
              @click.alt="log(layout)">
@@ -356,6 +356,82 @@
 
             </div>
 
+            <div v-else-if="store.tabIndex === 7" class="flex-1 flex flex-col">
+              <div class="flex flex-row justify-end p-4">
+                <button type="button" @click="newChat()">
+                  <svg width="19" height="19" class="fill-primary hover:fill-primary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z"/></svg>
+                </button>
+              </div>
+              <div class="flex-1 overflow-y-auto">
+
+                <div class="flex flex-col gap-4 p-4">
+
+                  <div v-for="message in chat.messages"
+                       :class="$style.chat + ' ' + (message.direction === 1 ? $style.chatIn : $style.chatOut)">
+
+                    <p>{{ message.body }}</p>
+
+                    <div v-if="message.direction !== 1" class="flex text-text-300 flex-row items-center gap-2 self-stretch pl-3">
+                      <small class="text-xs text-text-300">{{ message.llmOutputTokenCount }} token</small>
+                      &bull;
+                      <small class="text-xs text-text-300">{{ message.llmEllapsedMs }} ms</small>
+                      <div class="flex-1"></div>
+                      <button type="button" class="text-xs group hover:text-primary" v-if="(message.attachments ?? [])[0]" @click="chatSet(message.attachments[0])">
+                        <svg width="9" height="9" class="inline fill-text-300 group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 480C148.6 480 128 457.6 128 432v-352c0-25.38 20.4-47.98 48.01-47.98c8.686 0 17.35 2.352 25.02 7.031l288 176C503.3 223.8 512 239.3 512 256s-8.703 32.23-22.97 40.95l-288 176C193.4 477.6 184.7 480 176 480z"/></svg>
+                        Apply
+                      </button>
+                    </div>
+                  </div>
+
+                </div>
+
+                <pre class="text-xs break-all whitespace-pre-wrap">
+
+                </pre>
+
+              </div>
+              <div class="p-2">
+                <div class="flex flex-col gap-2">
+                  <div class="flex flex-row gap-2 items-start">
+                    <div class="w-[22px]"></div>
+                    <div class="flex-1 flex flex-row flex-wrap gap-2">
+                      <div v-for="(attachment, idx) in chat.attachments">
+                        <Image :src="attachment.image"
+                               @click="chat.attachments.splice(idx, 1)"
+                               class="w-[48px] h-[48px] border-[1px] rounded-lg border-border-200" />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex flex-row items-start gap-2">
+                    <div class="pt-1">
+                      <Button variant="minimal" class="p-0 mt-1" type="button" @click="$refs.chatFile.click()">
+                        <svg width="19" height="19" class="fill-primary hover:fill-primary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z"/></svg>
+                      </Button>
+                      <input type="file" accept="image/*" multiple ref="chatFile" class="hidden" @change="onChatUpload" />
+                    </div>
+                    <div class="flex-1">
+                    <Textarea v-model="chat.input" rows="5" class="max-h-[60vh]">
+                      <template #end>
+                          <div class="p-2">
+                            <Button ref="chatBtn" variant="minimal" class="p-0" type="button" @click="chatApply">
+                              <svg width="19" height="19" class="fill-primary hover:fill-primary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM372.5 276.5l-144 88C224.7 366.8 220.3 368 216 368c-13.69 0-24-11.2-24-24V168C192 155.3 202.2 144 216 144c4.344 0 8.678 1.176 12.51 3.516l144 88C379.6 239.9 384 247.6 384 256C384 264.4 379.6 272.1 372.5 276.5z"/></svg>
+                            </Button>
+                          </div>
+                        </template>
+                    </Textarea>
+                    </div>
+                  </div>
+
+                  <div class="flex flex-row justify-end px-3 gap-2 text-text-300 text-xs">
+                    <div class="text-text-300">{{ totalChatTokens }} tokens</div>
+                    &bull;
+                    <div class="text-text-300">{{ chat.model }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
           </div>
 
           <div :class="$style.resize1"
@@ -564,6 +640,107 @@ import OGSettingModal from "./OGSettingModal.vue";
 
 const patchPageCache = {}
 
+const fontFamilies = {
+  '"Anton", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');`,
+  'Dosis, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap');`,
+  'Lato, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');`,
+  'Merriweather, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');`,
+  'Montserrat, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');`,
+  '"Noto Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');`,
+  'Oswald, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');`,
+  'Oxygen, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap');`,
+  'Poppins, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');`,
+  'Quantico, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap"');`,
+  'Raleway, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');`,
+  '"Reddit Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:wght@400;700&display=swap');`,
+  '"Roboto", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');`,
+  '"Roboto Slab", serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap');`,
+  'Volkhov, serif': `@import url('https://fonts.googleapis.com/css2?family=Volkhov:wght@400;700&display=swap');`,
+  '"Work Sans", serif': `@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');`,
+}
+
+const defaultMedia = {
+  ":root": {
+    "--spacing-1": [],
+    "--spacing-2": [],
+    "--spacing-3": [],
+    "--spacing-4": [],
+    "--spacing-5": [],
+    "--spacing-6": [],
+    "--spacing-7": [],
+    "--spacing-8": [],
+    "--spacing-9": [],
+    "--spacing-10": [],
+    "--spacing-11": [],
+    "--spacing-12": []
+  },
+  "*": {
+    "font-family": [ "Poppins, sans-serif" ]
+  },
+  "html, .html": {
+    "font-size": [],
+    "--base-300": [ "rgb(235, 235, 235)" ],
+    "--base-400": [ "rgb(245, 245, 245)" ],
+    "--base-500": [ "rgb(255, 255, 255)" ],
+    "--primary-100": [],
+    "--primary-200": [],
+    "--primary-300": [],
+    "--primary-400": [],
+    "--primary-500": [ "rgb(0, 0, 0)" ],
+    "--primary-600": [ "rgb(15, 15, 15)" ],
+    "--primary-700": [],
+    "--primary-800": [],
+    "--primary-900": [],
+    "--secondary-100": [],
+    "--secondary-200": [],
+    "--secondary-300": [],
+    "--secondary-400": [],
+    "--secondary-500": [],
+    "--secondary-600": [],
+    "--secondary-700": [],
+    "--secondary-800": [],
+    "--secondary-900": [],
+    "--text-100": [],
+    "--text-200": [],
+    "--text-300": [],
+    "--text-400": [],
+    "--text-500": [ "rgb(33, 33, 33)" ],
+    "--text-600": [],
+    "--text-700": [],
+    "--text-800": [],
+    "--text-900": []
+  }
+}
+
+function collectFontImports(styles) {
+  const usedFonts = new Set()
+  const media = styles?.media || {}
+
+  for (const selector in media) {
+    const rules = media[selector]
+    if (!rules || !rules['font-family']) continue
+
+    const values = rules['font-family']
+    if (!Array.isArray(values)) continue
+
+    for (const val of values) {
+      if (!val) continue
+      if (fontFamilies[val]) {
+        usedFonts.add(val)
+      }
+    }
+  }
+
+  return Array.from(usedFonts)
+      .map(font => fontFamilies[font])
+      .join('\n')
+}
+
+function indent(str, spaces = 2) {
+  const pad = ' '.repeat(spaces)
+  return str.split('\n').map(line => pad + line).join('\n')
+}
+
 export default{
 
   components: {OGSettingModal, WebComponentSelector, WebLayoutSelector},
@@ -730,7 +907,7 @@ export default{
     },
 
     createLayout(layout){
-      this.socket.send(`${this.controller}.create-layout`, layout)
+      this.useSocket().send(`${this.controller}.create-layout`, layout)
           .then(layout => {
             this.loadLayouts()
             this.page.layoutId = layout.id
@@ -739,57 +916,78 @@ export default{
           .catch(err => this.alert(err))
     },
 
-    createStyleSheet(styles){
+    createStyleSheet(styles, breakpoints = {
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px'
+    }){
+      const mediaBuckets = {
+        base: [],
+        md: [],
+        lg: [],
+        xl: []
+      }
+
+      const media = styles?.media || {}
+
+      for (const selector in media) {
+        const rules = media[selector]
+        if (!rules || Object.keys(rules).length === 0) continue
+
+        const ruleSets = {
+          base: [],
+          md: [],
+          lg: [],
+          xl: []
+        }
+
+        for (const prop in rules) {
+          const values = rules[prop]
+          if (!Array.isArray(values)) continue
+
+          if (values[0] !== undefined) ruleSets.base.push(`${prop}: ${values[0]};`)
+          if (values[1] !== undefined) ruleSets.md.push(`${prop}: ${values[1]};`)
+          if (values[2] !== undefined) ruleSets.lg.push(`${prop}: ${values[2]};`)
+          if (values[3] !== undefined) ruleSets.xl.push(`${prop}: ${values[3]};`)
+        }
 
-      const mediaQueries = {
-        '': '@media screen',
-        'md:': '@media screen and (min-width: 640px)',
+        for (const size in ruleSets) {
+          if (ruleSets[size].length === 0) continue
+          mediaBuckets[size].push(
+              `${selector} {\n  ${ruleSets[size].join('\n  ')}\n}`
+          )
+        }
       }
 
-      const fontFamilies = {
-        '"Anton", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');`,
-        'Dosis, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap');`,
-        'Lato, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');`,
-        'Merriweather, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');`,
-        'Montserrat, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');`,
-        '"Noto Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');`,
-        'Oswald, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');`,
-        'Oxygen, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap');`,
-        'Poppins, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');`,
-        'Quantico, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap"');`,
-        'Raleway, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');`,
-        '"Reddit Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:wght@400;700&display=swap');`,
-        '"Roboto", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');`,
-        '"Roboto Slab", serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap');`,
-        'Volkhov, serif': `@import url('https://fonts.googleapis.com/css2?family=Volkhov:wght@400;700&display=swap');`,
-        '"Work Sans", serif': `@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');`,
+      let css = ''
+
+      const fontImports = collectFontImports(styles, fontFamilies)
+      if (fontImports) {
+        css += fontImports + '\n\n'
       }
 
-      let text = ''
-      const usedFonts = {}
-      for(let mediaKey in styles?.media){
-        const css = styles.media[mediaKey]
+      const mediaImports = styles?.imports || []
+      if (Array.isArray(mediaImports)) {
+        css += mediaImports.join('\n') + '\n\n'
+      }
 
-        text += mediaQueries[mediaKey] + '{ '
-        for(let key in css){
-          text += key + '{ '
-          for(let selector in css[key]){
-            text += selector + ':' + css[key][selector] + ';'
+      if (mediaBuckets.base.length) {
+        css += mediaBuckets.base.join('\n\n') + '\n\n'
+      }
 
-            if(selector === 'font-family' && fontFamilies[css[key][selector]]){
-              usedFonts[css[key][selector]] = fontFamilies[css[key][selector]]
-            }
-          }
-          text += '}'
-        }
-        text += '}\n'
+      if (mediaBuckets.md.length) {
+        css += `@media (min-width: ${breakpoints.md}) {\n${indent(mediaBuckets.md.join('\n\n'))}\n}\n\n`
       }
 
-      return [
-        ...Object.values(usedFonts),
-        text
-      ]
-          .join("\n")
+      if (mediaBuckets.lg.length) {
+        css += `@media (min-width: ${breakpoints.lg}) {\n${indent(mediaBuckets.lg.join('\n\n'))}\n}\n\n`
+      }
+
+      if (mediaBuckets.xl.length) {
+        css += `@media (min-width: ${breakpoints.xl}) {\n${indent(mediaBuckets.xl.join('\n\n'))}\n}\n\n`
+      }
+
+      return css.trim()
     },
 
     createInstances(){
@@ -887,7 +1085,7 @@ export default{
     },
 
     listen(){
-      this.socket.send(`${this.controller}.subscribe`, { name:'page' })
+      this.useSocket().send(`${this.controller}.subscribe`, { name:'page' })
           .then(() => {
 
           })
@@ -895,16 +1093,17 @@ export default{
     },
 
     async load(){
-      return this.socket.send(`${this.controller}.open`, { uid:this.$route.params.uid })
-          .then(({ page, host, previewHost, debugMode }) => {
+      return this.useSocket().send(`${this.controller}.open`, { uid:this.$route.params.uid })
+          .then(({ page, previewHost, debugMode, useChat }) => {
 
             this.patchPage(page)
 
             if(page) Object.assign(this.page, page)
-            if(host) this.host = host
             this.debugMode = debugMode ?? this.debugMode
             if(previewHost) this.previewHost = previewHost
 
+            this.useChat = useChat ?? this.useChat
+
             this.prevData = {
               page: JSON.stringify(this.page),
               layout: JSON.stringify(this.layout)
@@ -912,21 +1111,11 @@ export default{
 
             this.pageHistory.commit()
 
-            host = this.host ?? import.meta.env.VITE_WEB_HOST
-
-            if(host){
-              this.$nextTick(() => {
-                this.resize()
+            this.$nextTick(() => {
+              this.resize()
 
-                if(this.previewHost){
-                  this.iframeSrc = this.previewHost + `?edit-mode=${this.store.previewMode}`
-                }
-                else{
-                  this.iframeSrc = host + '/' + (this.page.path ?? '') +
-                      `?edit-mode=${this.store.previewMode}`
-                }
-              })
-            }
+              this.iframeSrc = this.previewHost + `?edit-mode=${this.store.previewMode}`
+            })
 
             this.readyState = 1
           })
@@ -1026,7 +1215,7 @@ export default{
     },
 
     async loadLayouts(){
-      this.socket.send(`${this.controller}.load-layouts`, {})
+      this.useSocket().send(`${this.controller}.load-layouts`, {})
           .then(_ => {
             this.layouts = _
           })
@@ -1034,7 +1223,7 @@ export default{
 
     loadDatasource(){
       if(this.useDatasource && this.useDatasource[1]){
-        this.socket.send(this.useDatasource[1], this.page.datasource)
+        this.useSocket().send(this.useDatasource[1], this.page.datasource)
             .then((data) => {
               Object.assign(this.page, { data })
               this.updateIframe()
@@ -1045,7 +1234,7 @@ export default{
     loadPreset(){
       if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
         if(this.presetKey){
-          return this.socket.send(this.presetSrc, { key:this.presetKey })
+          return this.useSocket().send(this.presetSrc, { key:this.presetKey })
               .then(config => {
                 if(config){
                   Object.assign(this.config.params, config.params)
@@ -1339,7 +1528,7 @@ export default{
       this.createInstances()
 
       this.$refs.saveBtn.setState(2)
-      this.socket.send(`${this.controller}.save`, { ...this.page, layout:this.layout })
+      this.useSocket().send(`${this.controller}.save`, { ...this.page, layout:this.layout })
           .then((_) => {
             this.prevData = {
               page: JSON.stringify(this.page),
@@ -1371,7 +1560,7 @@ export default{
 
     savePreset: invokeAfterIdle(function() {
       if(this.presetKey) {
-        this.socket.send(this.presetSrc,
+        this.useSocket().send(this.presetSrc,
             {key: this.presetKey, config: this.config})
       }
     }),
@@ -1397,7 +1586,7 @@ export default{
     },
 
     stopListen(){
-      this.socket.send(`${this.controller}.unsubscribe`, { name:'page' })
+      this.useSocket().send(`${this.controller}.unsubscribe`, { name:'page' })
           .catch((err) => this.toast(err))
     },
 
@@ -1464,6 +1653,97 @@ export default{
       }
     },
 
+    chatApply(){
+
+      this.$refs.chatBtn.setState(2)
+      return this.useSocket()
+          .send(`${this.controller}.chat`, {
+            key: this.chat.key,
+            prompt: this.chat.input,
+            attachments: this.chat.attachments,
+            pageId: this.page.id,
+            input: {
+              components: this.page.components,
+              styles: this.layout?.styles ?? {}
+            }
+          })
+          .catch(err => this.alert(err))
+          .then(res => {
+            for(let message of res.messages){
+              try{
+                for(let attachment of (message.attachments ?? [])){
+                  if(attachment.type === 'page'){
+                    this.chatSet(attachment)
+                  }
+                }
+
+                if(message.model) this.chat.model = message.model
+
+                this.chat.messages.push(message)
+              }
+              catch(e){
+                console.error(e)
+              }
+            }
+
+            this.chat.input = ''
+            this.chat.attachments = []
+          })
+          .finally(_ => this.$refs.chatBtn?.resetState())
+    },
+
+    onChatUpload(e){
+      for(let file of e.target.files){
+        this.chat.attachments.push({
+          type: "image",
+          image: file
+        })
+      }
+    },
+
+    chatSet(obj){
+
+      if(obj?.styles?.media && this.layout){
+        Object.assign(this.layout, {
+          styles: {
+            media: this.createMedia(obj.styles.media),
+            imports: obj.styles.imports
+          }
+        })
+      }
+
+      if((obj?.components ?? []).length > 0){
+        Object.assign(this.page, {
+          components: obj.components
+        })
+      }
+    },
+
+    createMedia(obj){
+
+      const newMedia = JSON.parse(JSON.stringify(defaultMedia))
+
+      for(let selector in obj){
+        if(!newMedia[selector]){
+          newMedia[selector] = {}
+        }
+        for(let prop in obj[selector]){
+          newMedia[selector][prop] = obj[selector][prop]
+        }
+      }
+
+      return newMedia
+    },
+
+    newChat(){
+      this.config.params.chat = {
+        key: md5('web-page-chat-' + new Date().getTime()),
+        input: '',
+        attachments: [],
+        messages: []
+      }
+    }
+
   },
 
   computed: {
@@ -1501,7 +1781,7 @@ export default{
     },
 
     computedIframeSrc(){
-      return `${this.iframeSrc}`.substring(0, `${this.iframeSrc}`.indexOf('?'))
+      return this.page.app.hosts[0].name + this.page.path
     },
 
     currentItem(){
@@ -1604,6 +1884,17 @@ export default{
       return this.config.params
     },
 
+    tabItems(){
+      return [
+        { text:"Page Info", value:1 },
+        { text:"Layout", value:4 },
+        { text:"Components", value:2 },
+        this.useChat ? { text:"Chat", value:7 } : null,
+        /*{ text:"Datasource", value:3 },*/
+      ]
+        .filter(_ => _)
+    },
+
     presetSrc(){
       return this.controller ?
           `${this.controller}.preset` :
@@ -1612,6 +1903,20 @@ export default{
 
     viewIndex(){
       return this.viewTypes.findIndex(_ => _.value === this.store.viewType)
+    },
+
+    chat(){
+      if(!this.config.params.chat)
+        this.newChat()
+      return this.config.params.chat
+    },
+
+    totalChatTokens(){
+      let total = 0
+      for(let message of this.chat.messages){
+        total += message.llmOutputTokenCount ?? 0
+      }
+      return total
     }
 
   },
@@ -1654,6 +1959,8 @@ export default{
         'flexDirection',
         'zIndex',
 
+        'backdropBlur',
+
         'autoFlow', 'alignItems', 'justifyContent',
         'letterSpacing', 'lineClamp',
 
@@ -1665,12 +1972,11 @@ export default{
         'containerVariant', 'containerGridColumn', 'containerGap'
       ],
       itemClasses: [
-        'itemMinWidth', 'itemRatio', 'itemVariant'
+        'itemMinWidth', 'itemRatio', 'itemVariant', 'objectFit'
       ],
       styleClasses: [
         'bgColors', 'bgImages', 'bdColor'
       ],
-      host: null,
       previewHost: null,
       iframeStyle: {},
       iframeSrc: '',
@@ -1687,12 +1993,6 @@ export default{
       ],
       routerBeforeEach: null,
       readyState: 2,
-      tabItems: [
-        { text:"Page Info", value:1 },
-        { text:"Layout", value:4 },
-        { text:"Components", value:2 },
-        /*{ text:"Datasource", value:3 },*/
-      ],
       stylesheets: [
         'font-family'
       ],
@@ -1700,12 +2000,14 @@ export default{
 
       extRightPane: null,
       debugMode: false,
+
+      useChat: false
     }
   },
 
   emits: [ 'close', 'unmount' ],
 
-  inject: [ 'alert', 'appStyle', 'confirm', 'socket', 'toast' ],
+  inject: [ 'alert', 'appStyle', 'confirm', 'useSocket', 'toast' ],
 
   mounted() {
     this.loadPreset()
@@ -1729,7 +2031,7 @@ export default{
     })
 
     this.listen()
-    this.socket.onAny(this.onHooks)
+    this.useSocket().onAny(this.onHooks)
   },
 
   unmounted() {
@@ -1739,7 +2041,7 @@ export default{
     window.removeEventListener('beforeunload', this.onUnload)
     this.routerBeforeEach()
     this.stopListen()
-    this.socket.offAny(this.onHooks)
+    this.useSocket().offAny(this.onHooks)
     this.$emit('unmount', { uid:this.page.uid })
   },
 
@@ -1825,6 +2127,27 @@ export default{
   @apply border-[1px] border-border-200;
 }
 
+.chat{
+  @apply max-w-[80%] flex flex-col;
+}
+
+.chatIn{
+  @apply self-start;
+}
+.chatIn p{
+  @apply bg-border-100 p-3 rounded-lg;
+}
+
+.chatOut{
+  @apply self-end flex flex-col items-end;
+}
+.chatOut p{
+  @apply bg-primary-100 p-3 rounded-lg;
+}
+.chatOut button{
+  @apply p-0 px-2 text-sm mt-1 rounded-sm;
+}
+
 </style>
 
 <style>