victor HF staff commited on
Commit
bccd811
1 Parent(s): 3941b41

Web search: UI update (#749)

Browse files

* wip

* ui

* font-size

* leading

* smaller

* move icon and remove loading props

* rm inline svg

* rm animation

src/lib/components/OpenWebSearchResults.svelte CHANGED
@@ -1,41 +1,58 @@
1
  <script lang="ts">
2
  import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
3
- import CarbonCaretRight from "~icons/carbon/caret-right";
4
 
5
- import CarbonCheckmark from "~icons/carbon/checkmark-filled";
6
  import CarbonError from "~icons/carbon/error-filled";
7
-
8
  import EosIconsLoading from "~icons/eos-icons/loading";
 
9
 
10
- export let loading = false;
11
  export let classNames = "";
12
  export let webSearchMessages: WebSearchUpdate[] = [];
13
 
14
- let detailsOpen: boolean;
15
- let error: boolean;
16
- $: error = webSearchMessages[webSearchMessages.length - 1]?.messageType === "error";
17
  </script>
18
 
19
  <details
20
  class="flex w-fit rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 {classNames} max-w-full"
21
- bind:open={detailsOpen}
22
  >
23
- <summary
24
- class="align-center flex cursor-pointer select-none list-none py-1 pl-2.5 pr-2 align-text-top transition-all"
25
- >
26
- {#if error}
27
- <CarbonError class="my-auto text-red-700 dark:text-red-500" />
28
- {:else if loading}
29
- <EosIconsLoading class="my-auto text-gray-500" />
30
- {:else}
31
- <CarbonCheckmark class="my-auto text-gray-500" />
32
- {/if}
33
- <span class="px-2 font-medium" class:text-red-700={error} class:dark:text-red-500={error}>
34
- Web search
35
- </span>
36
- <div class="my-auto transition-all" class:rotate-90={detailsOpen}>
37
- <CarbonCaretRight />
 
 
 
 
 
 
 
 
 
38
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
39
  </summary>
40
 
41
  <div class="content px-5 pb-5 pt-4">
@@ -88,27 +105,18 @@
88
  </details>
89
 
90
  <style>
91
- @keyframes grow {
92
- 0% {
93
- font-size: 0;
94
- opacity: 0;
95
- }
96
- 30% {
97
- font-size: 1em;
98
- opacity: 0;
99
- }
100
- 100% {
101
- opacity: 1;
102
- }
103
  }
104
 
105
- details[open] .content {
106
- animation-name: grow;
107
- animation-duration: 300ms;
108
- animation-delay: 0ms;
109
  }
110
 
111
- details summary::-webkit-details-marker {
112
- display: none;
 
 
113
  }
114
  </style>
 
1
  <script lang="ts">
2
  import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
 
3
 
 
4
  import CarbonError from "~icons/carbon/error-filled";
 
5
  import EosIconsLoading from "~icons/eos-icons/loading";
6
+ import IconInternet from "./icons/IconInternet.svelte";
7
 
 
8
  export let classNames = "";
9
  export let webSearchMessages: WebSearchUpdate[] = [];
10
 
11
+ $: sources = webSearchMessages.find((m) => m.sources)?.sources;
12
+ $: error = webSearchMessages.find((m) => m.messageType === "error");
13
+ $: loading = !sources && !error;
14
  </script>
15
 
16
  <details
17
  class="flex w-fit rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 {classNames} max-w-full"
 
18
  >
19
+ <summary class="grid min-w-72 select-none grid-cols-[40px,1fr] items-center gap-2.5 p-2">
20
+ <div
21
+ class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
22
+ >
23
+ <svg
24
+ class="absolute inset-0 text-gray-300 transition-opacity dark:text-gray-700 {loading
25
+ ? 'opacity-100'
26
+ : 'opacity-0'}"
27
+ width="40"
28
+ height="40"
29
+ viewBox="0 0 38 38"
30
+ fill="none"
31
+ xmlns="http://www.w3.org/2000/svg"
32
+ >
33
+ <path
34
+ class="loading-path"
35
+ d="M8 2.5H30C30 2.5 35.5 2.5 35.5 8V30C35.5 30 35.5 35.5 30 35.5H8C8 35.5 2.5 35.5 2.5 30V8C2.5 8 2.5 2.5 8 2.5Z"
36
+ stroke="currentColor"
37
+ stroke-width="1"
38
+ stroke-linecap="round"
39
+ id="shape"
40
+ />
41
+ </svg>
42
+ <IconInternet classNames="relative fill-current text-xl" />
43
  </div>
44
+ <dl class="leading-4">
45
+ <dd class="text-sm">Web Search</dd>
46
+ <dt class="flex items-center gap-1 truncate whitespace-nowrap text-[.82rem] text-gray-400">
47
+ {#if error}
48
+ {error.message}
49
+ {:else if sources}
50
+ Completed
51
+ {:else}
52
+ {webSearchMessages[webSearchMessages.length - 1].message}
53
+ {/if}
54
+ </dt>
55
+ </dl>
56
  </summary>
57
 
58
  <div class="content px-5 pb-5 pt-4">
 
105
  </details>
106
 
107
  <style>
108
+ details summary::-webkit-details-marker {
109
+ display: none;
 
 
 
 
 
 
 
 
 
 
110
  }
111
 
112
+ .loading-path {
113
+ stroke-dasharray: 61.45;
114
+ animation: loading 2s linear infinite;
 
115
  }
116
 
117
+ @keyframes loading {
118
+ to {
119
+ stroke-dashoffset: 122.9;
120
+ }
121
  }
122
  </style>
src/lib/components/chat/ChatMessage.svelte CHANGED
@@ -151,7 +151,6 @@
151
  <OpenWebSearchResults
152
  classNames={tokens.length ? "mb-3.5" : ""}
153
  webSearchMessages={searchUpdates}
154
- loading={!(searchUpdates[searchUpdates.length - 1]?.messageType === "sources")}
155
  />
156
  {/if}
157
  {#if !message.content && (webSearchIsDone || (webSearchMessages && webSearchMessages.length === 0))}
 
151
  <OpenWebSearchResults
152
  classNames={tokens.length ? "mb-3.5" : ""}
153
  webSearchMessages={searchUpdates}
 
154
  />
155
  {/if}
156
  {#if !message.content && (webSearchIsDone || (webSearchMessages && webSearchMessages.length === 0))}
src/lib/components/icons/IconInternet.svelte ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let classNames = "";
3
+ </script>
4
+
5
+ <svg
6
+ class={classNames}
7
+ xmlns="http://www.w3.org/2000/svg"
8
+ aria-hidden="true"
9
+ focusable="false"
10
+ role="img"
11
+ width="1em"
12
+ height="1em"
13
+ preserveAspectRatio="xMidYMid meet"
14
+ viewBox="0 0 20 20"
15
+ >
16
+ ><path
17
+ fill-rule="evenodd"
18
+ d="M1.5 10a8.5 8.5 0 1 0 17 0a8.5 8.5 0 0 0-17 0m16 0a7.5 7.5 0 1 1-15 0a7.5 7.5 0 0 1 15 0"
19
+ clip-rule="evenodd"
20
+ /><path
21
+ fill-rule="evenodd"
22
+ d="M6.5 10c0 4.396 1.442 8 3.5 8s3.5-3.604 3.5-8s-1.442-8-3.5-8s-3.5 3.604-3.5 8m6 0c0 3.889-1.245 7-2.5 7s-2.5-3.111-2.5-7S8.745 3 10 3s2.5 3.111 2.5 7"
23
+ clip-rule="evenodd"
24
+ /><path
25
+ d="m3.735 5.312l.67-.742c.107.096.221.19.343.281c1.318.988 3.398 1.59 5.665 1.59c1.933 0 3.737-.437 5.055-1.19a5.59 5.59 0 0 0 .857-.597l.65.76c-.298.255-.636.49-1.01.704c-1.477.845-3.452 1.323-5.552 1.323c-2.47 0-4.762-.663-6.265-1.79a5.81 5.81 0 0 1-.413-.34m0 9.389l.67.74c.107-.096.221-.19.343-.28c1.318-.988 3.398-1.59 5.665-1.59c1.933 0 3.737.436 5.055 1.19c.321.184.608.384.857.596l.65-.76a6.583 6.583 0 0 0-1.01-.704c-1.477-.844-3.452-1.322-5.552-1.322c-2.47 0-4.762.663-6.265 1.789c-.146.11-.284.223-.413.34M2 10.5v-1h16v1z"
26
+ /></svg
27
+ >
src/lib/server/websearch/runWebSearch.ts CHANGED
@@ -120,11 +120,7 @@ export async function runWebSearch(
120
  });
121
  } catch (searchError) {
122
  if (searchError instanceof Error) {
123
- appendUpdate(
124
- "An error occurred with the web search",
125
- [JSON.stringify(searchError.message)],
126
- "error"
127
- );
128
  }
129
  }
130
 
 
120
  });
121
  } catch (searchError) {
122
  if (searchError instanceof Error) {
123
+ appendUpdate("An error occurred", [JSON.stringify(searchError.message)], "error");
 
 
 
 
124
  }
125
  }
126