From cf5f71a54e7839233130c6afa73c817a7dfc805e Mon Sep 17 00:00:00 2001 From: yujonglee Date: Fri, 12 Jul 2024 20:44:37 +0900 Subject: [PATCH] update style --- js/packages/web/index.html | 6 +- js/packages/web/mock.ts | 11 +-- js/packages/web/package.json | 2 +- js/packages/web/src/canary-input.ts | 2 +- js/packages/web/src/canary-panel.ts | 92 ++++++++----------------- js/packages/web/src/icons/light-bulb.ts | 18 ----- js/packages/web/src/icons/user.ts | 18 ----- 7 files changed, 39 insertions(+), 110 deletions(-) delete mode 100644 js/packages/web/src/icons/light-bulb.ts delete mode 100644 js/packages/web/src/icons/user.ts diff --git a/js/packages/web/index.html b/js/packages/web/index.html index 4337fb0c..cc0612d6 100644 --- a/js/packages/web/index.html +++ b/js/packages/web/index.html @@ -43,7 +43,7 @@ --canary-color-gray-7: #f4f7f3; --canary-color-black: #ffffff; - background-color: white; + background-color: black; border: 1px solid black; color: black; @@ -67,8 +67,8 @@ --canary-color-gray-6: #1f2a1c; --canary-color-black: #151a13; - background-color: black; - border: 1px solid white; + background-color: white; + border: 1px solid black; color: white; display: flex; diff --git a/js/packages/web/mock.ts b/js/packages/web/mock.ts index 25444cc9..bc926afe 100644 --- a/js/packages/web/mock.ts +++ b/js/packages/web/mock.ts @@ -10,10 +10,13 @@ const mocks: MockHandler[] = [ excerpt: "123", }); - setTimeout(() => { - res.setHeader("Content-Type", "application/json"); - res.end(JSON.stringify(items)); - }, Math.random() * 500); + setTimeout( + () => { + res.setHeader("Content-Type", "application/json"); + res.end(JSON.stringify(items)); + }, + Math.random() * 200 + 400, + ); }, }, { diff --git a/js/packages/web/package.json b/js/packages/web/package.json index 760296e4..2d5ca15a 100644 --- a/js/packages/web/package.json +++ b/js/packages/web/package.json @@ -1,6 +1,6 @@ { "name": "@getcanary/web", - "version": "0.0.4", + "version": "0.0.5", "type": "module", "files": [ "components" diff --git a/js/packages/web/src/canary-input.ts b/js/packages/web/src/canary-input.ts index ef3f9aac..5bcfd66e 100644 --- a/js/packages/web/src/canary-input.ts +++ b/js/packages/web/src/canary-input.ts @@ -20,7 +20,7 @@ const STYLE = css` } input { - flex-grow: 1; + width: 400px; height: 30px; outline: none; border: none; diff --git a/js/packages/web/src/canary-panel.ts b/js/packages/web/src/canary-panel.ts index 8d3e3e7f..1a2c2817 100644 --- a/js/packages/web/src/canary-panel.ts +++ b/js/packages/web/src/canary-panel.ts @@ -7,11 +7,6 @@ import { Task } from "@lit/task"; import { highlighter } from "@nlux/highlighter"; import { createMarkdownStreamParser } from "@nlux/markdown"; -import "./icons/magnifying-glass"; -import "./icons/question-mark-circle"; -import "./icons/light-bulb"; -import "./icons/user"; - import "./canary-toggle"; import "./canary-input"; @@ -129,9 +124,12 @@ export class CanaryPanel extends LitElement {
${this.render_results()}
- + ${this.query == "" + ? nothing + : html` `} `; } @@ -142,32 +140,15 @@ export class CanaryPanel extends LitElement { initial: () => nothing, pending: () => this.mode === "Search" - ? html` - ${Array(Math.round(Math.random() * 3) + 2).fill( - html`
`, - )} - ` - : html` -
-
- - ${this.query} -
-
- - ${this.responseContainer} -
- - `, + ? html`
+ ${Array(4).fill(html`
`)} +
` + : html`
${this.responseContainer}
`, complete: this.mode === "Search" ? (items: SearchResultItem[]) => items.length === 0 - ? html` -
- No results found -
- ` + ? nothing : items.map( ({ title, url, excerpt }, index) => html` this.query !== "" ? html` -
-
- - ${this.query} -
-
- - ${this.responseContainer} -
- - ` - : html`
Nothing found
`, +
${this.responseContainer}
+ ` + : nothing, error: (error) => { console.error(error); return html`
@@ -236,6 +208,10 @@ export class CanaryPanel extends LitElement { } private _handleToggle(e: CustomEvent) { + if (this.mode === "Ask") { + this.query = ""; + } + this.mode = e.detail; } @@ -243,7 +219,7 @@ export class CanaryPanel extends LitElement { content, css` div.container { - padding: 8px 12px; + padding: 8px 8px; border: none; border-radius: 8px; outline: none; @@ -285,31 +261,10 @@ export class CanaryPanel extends LitElement { } `, css` - .messages { - display: flex; - flex-direction: column; - gap: 4px; - } - - .user-message { - display: flex; - flex-direction: row; - align-items: center; - gap: 6px; - border: 1px solid var(--canary-color-gray-6); - border-radius: 8px; - padding: 4px; - width: fit-content; - } - .ai-message { - display: flex; - flex-direction: row; - align-items: center; - gap: 6px; border: 1px solid var(--canary-color-gray-6); border-radius: 8px; - padding: 4px; + padding: 0px 12px; } `, css` @@ -340,6 +295,13 @@ export class CanaryPanel extends LitElement { } `, css` + .skeleton-container { + display: flex; + flex-direction: column; + gap: 8px; + height: 500px; + } + .skeleton { border: none; background-color: var(--canary-color-gray-5); diff --git a/js/packages/web/src/icons/light-bulb.ts b/js/packages/web/src/icons/light-bulb.ts deleted file mode 100644 index b787a32d..00000000 --- a/js/packages/web/src/icons/light-bulb.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { LitElement, html } from "lit"; -import { customElement } from "lit/decorators.js"; - -@customElement("hero-light-bulb") -export class HeroIconLightBulb extends LitElement { - render() { - return html`${this.svg()}`; - } - - svg() { - return html` - - - - - `; - } -} diff --git a/js/packages/web/src/icons/user.ts b/js/packages/web/src/icons/user.ts deleted file mode 100644 index 0abad7fb..00000000 --- a/js/packages/web/src/icons/user.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { LitElement, html } from "lit"; -import { customElement } from "lit/decorators.js"; - -@customElement("hero-user") -export class HeroIconUser extends LitElement { - render() { - return html`${this.svg()}`; - } - - svg() { - return html` - - - - - `; - } -}