Rough out more components

commontoolsinc · gordonbrander · May 30, 2024 · May 29, 2024 · May 29, 2024 · May 30, 2024
commit cd03b49a3fff19d9cde0a2b8e3dd0b3f20954442
diff --git a/static/2024-05-29-app-skeleton/static/main.css b/static/2024-05-29-app-skeleton/static/main.css
@@ -1,4 +1,4 @@
-* {
+:where(*) {
     margin: 0;
     padding: 0;
     box-sizing: border-box;

diff --git a/static/2024-05-30-app-skeleton-lit/index.html b/static/2024-05-30-app-skeleton-lit/index.html
@@ -9,22 +9,32 @@
 </head>
 <body class="theme">
     <com-app-grid>
-        <com-content slot="main">
-            <com-chat>
-                <com-thread slot="main">
-                    <com-thread-group>
+        <com-chat slot="main">
+            <com-thread slot="main">
+                <com-thread-group>
+                    <com-prompt slot="prompt">
                         Hello world
-                    </com-thread-group>
-                    <com-thread-group>
+                    </com-prompt>
+                    <com-response slot="response">
+                        Henlo world
+                    </com-response>
+                </com-thread-group>
+                <com-thread-group>
+                    <com-prompt slot="prompt">
                         Hello world
-                    </com-thread-group>
-                </com-thread>
-                <div slot="footer">
-                    Footer
-                </div>
-            </com-chat>
-        </com-content>
-        <div slot="sidebar">Hello world</div>
+                    </com-prompt>
+                    <com-response slot="response">
+                        Henlo world
+                    </com-response>
+                </com-thread-group>
+            </com-thread>
+            <div slot="footer">
+                Footer
+            </div>
+        </com-chat>
+        <div slot="sidebar">
+
+        </div>
     </com-app-grid>
 </body>
 </html>
diff --git a/static/2024-05-30-app-skeleton-lit/package.json b/static/2024-05-30-app-skeleton-lit/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "dev": "vite"
   },
   "author": "Gordon Brander",
   "license": "MIT",

diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-prompt.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-prompt.ts
@@ -0,0 +1,23 @@
+import {LitElement, html, css} from 'lit-element'
+import {customElement} from 'lit/decorators.js'
+import {base} from '../styles'
+
+const styles = css`
+:host {
+  display: block;
+  padding: var(--gap);
+
+  &:focus {
+    outline: none;
+  }
+}
+`
+
+@customElement('com-prompt')
+export class ComPrompt extends LitElement {
+  static styles = [base, styles]
+
+  render() {
+    return html`<slot></slot>`
+  }
+}
diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-response.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-response.ts
@@ -0,0 +1,31 @@
+import {LitElement, html, css} from 'lit-element'
+import {customElement} from 'lit/decorators.js'
+import {base} from '../styles'
+
+const styles = css`
+:host {
+  display: block;
+}
+
+.main {
+  background-color: var(--color-secondary-background);
+  padding: var(--gap);
+
+  &:focus {
+      outline: none;
+  }
+}
+`
+
+@customElement('com-response')
+export class ComResponse extends LitElement {
+  static styles = [base, styles]
+
+  render() {
+    return html`
+    <div class="main">
+      <slot></slot>
+    </div>
+    `
+  }
+}
diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-thread-group.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-thread-group.ts
@@ -0,0 +1,25 @@
+import {LitElement, html, css} from 'lit-element'
+import {customElement} from 'lit/decorators.js'
+import {base} from '../styles'
+
+const styles = css`
+:host {
+  background: var(--color-card);
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+`
+
+@customElement('com-thread-group')
+export class ComThreadGroup extends LitElement {
+  static styles = [base, styles]
+
+  render() {
+    return html`
+      <slot name="prompt"></slot>
+      <slot name="response"></slot>
+    `
+  }
+}
diff --git a/static/2024-05-30-app-skeleton-lit/src/main.css b/static/2024-05-30-app-skeleton-lit/src/main.css
@@ -1,4 +1,4 @@
-* {
+:where(*) {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -34,7 +34,3 @@
     color: var(--color-text);
     font: var(--body-font);
 }
-
-:not(:defined) {
-    display: none;
-}
diff --git a/static/2024-05-30-app-skeleton-lit/src/main.ts b/static/2024-05-30-app-skeleton-lit/src/main.ts
@@ -1,4 +1,7 @@
 export * as ComAppGrid from './components/com-app-grid'
 export * as ComContent from './components/com-content'
 export * as ComChat from './components/com-chat'
-export * as ComThread from './components/com-thread'
+export * as ComThread from './components/com-thread'
+export * as ComPrompt from './components/com-prompt'
+export * as ComResponse from './components/com-response'
+export * as ComThreadGroup from './components/com-thread-group'