date fixes for tools, better transitions

src/app.css

@@ -5,3 +5,31 @@
 * {
  font-family: "DejaVu Sans Mono", monospace;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: bold;
+ font-size: 32px;
+ margin: 8px 0 16px 0;
+}
+
+h2 {
+ font-size: 28px;
+}
+
+h3 {
+ font-size: 24px;
+}
+
+h4 {
+ font-size: 20px;
+}
+
+h5,
+h6 {
+ font-size: 16px;
+}

src/lib/components/CuteBall.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+ import { settingsStore } from "$lib/settings";
  import { tick } from "svelte";
 
  export let offsetX: number = -24;
@@ -7,29 +8,45 @@
  let hiddenBall: HTMLDivElement;
  let displayBall: HTMLDivElement;
 
+ let first = true;
+
  export async function addText(cb: () => void, getContainerBounds: () => DOMRect) {
  const oldContainerBounds = getContainerBounds();
  cb();
  await tick();
  if (!hiddenBall || !displayBall) return;
  const hiddenBounds = hiddenBall.getBoundingClientRect();
  const containerBounds = getContainerBounds();
- displayBall.style.left = `${hiddenBounds.left + offsetX}px`;
- displayBall.style.top = `${hiddenBounds.top + offsetY}px`;
  if (oldContainerBounds.height !== containerBounds.height) {
  displayBall.style.setProperty("--bg", "transparent");
  setTimeout(() => {
  if (displayBall) displayBall.style.setProperty("--bg", "white");
- }, 250);
+ }, 50);
+ displayBall.style.transition = "0.05s ease-in-out";
+ }
+ displayBall.style.left = `${hiddenBounds.left + offsetX}px`;
+ displayBall.style.top = `${hiddenBounds.top + offsetY}px`;
+ displayBall.offsetHeight;
+ displayBall.style.transition = $settingsStore.ballTransition + "ms ease-in-out";
+ if (first) {
+ displayBall.style.transition = "0.05s ease-in-out";
+ displayBall.style.left = `${containerBounds.left + offsetX}px`;
+ displayBall.style.top = `${containerBounds.top + offsetY}px`;
+ setTimeout(() => {
+ displayBall.style.transition = $settingsStore.ballTransition + "ms ease-in-out";
+ displayBall.style.left = `${hiddenBounds.left + offsetX}px`;
+ displayBall.style.top = `${hiddenBounds.top + offsetY}px`;
+ }, 0);
  }
+ first = false;
  }
 </script>
 
 <div bind:this={hiddenBall} class="inline-block" />
 <div
- style="transition: 0.02s ease-in-out; transition-property: left, top; --bg: white;"
+ style="transition: {$settingsStore.ballTransition}ms ease-in-out; transition-property: left, top; --bg: white;"
  bind:this={displayBall}
- class="ball w-4 h-4 bg-gray-400 rounded-full fixed left-0 top-0 after:content-[''] after:absolute after:top-0 after:h-5 after:w-[999px] after:bg-[var(--bg)]"
+ class="ball w-4 h-4 bg-gray-400 rounded-full fixed left-0 top-0 after:content-[''] after:absolute after:top-0 after:h-6 after:w-[999px] after:bg-[var(--bg)]"
 />
 
 <style>
@@ -40,7 +57,7 @@
  }
 
  .ball::after {
- transform: translateZ(-1px);
+ transform: translateZ(-1px) translateY(-4px);
  background-color: var(--bg);
  }
 </style>

src/lib/components/Settings.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
  import { afterNavigate } from "$app/navigation";
+ import { messagesStore } from "$lib/fncaller";
  import { settingsSchema, settingsStore } from "$lib/settings";
  import { onMount, tick } from "svelte";
 
  let settingsIcon: HTMLButtonElement;
  let settingsPanel: HTMLDivElement;
  let draggable: HTMLDivElement;
  let mainContent: HTMLDivElement;
+ let nonSettingsBtns: HTMLDivElement;
  let panelHeight = 256;
  let open = false;
  let dragging = false;
@@ -154,6 +156,9 @@
  window.addEventListener("mousemove", mouseMove);
  window.addEventListener("mouseup", mouseUp);
  draggable.style.pointerEvents = "none";
+ draggable.getAnimations().forEach((a) => a.cancel());
+ mainContent.getAnimations().forEach((a) => a.cancel());
+ settingsIcon.getAnimations().forEach((a) => a.cancel());
  }
  }
  function remapValue(value: number, minValue: number, maxValue: number): number {
@@ -186,26 +191,37 @@
  const maxBlur = 4;
  const maxTY = 100;
  const maxRotate = 400;
+ const maxOpacity = 1;
+ const maxTX = 64;
 
  mainContent.style.transition = "none";
  settingsIcon.style.transition = "none";
+ nonSettingsBtns.style.transition = "none";
 
  if (open) {
  mainContent.style.transform = `translateY(${initialContentY - maxTY * animationController}px)`;
  mainContent.style.filter = `blur(${
  remapValue(Math.max(maxBlur * -animationController, 0), 4, 0) + 2.36
  }px)`;
  settingsIcon.style.transform = `rotateZ(${maxRotate * animationController}deg)`;
+ nonSettingsBtns.style.opacity = `${maxOpacity * -animationController - 0.25}`;
+ nonSettingsBtns.style.transform = `translateX(${-maxTX * animationController - maxTX}px)`;
  } else {
  mainContent.style.transform = `translateY(${-(maxTY * animationController)}px)`;
  mainContent.style.filter = `blur(${Math.max(maxBlur * animationController, 0).toFixed(2)}px)`;
  settingsIcon.style.transform = `rotateZ(${maxRotate * animationController}deg)`;
+ nonSettingsBtns.style.opacity = `${remapValue(maxOpacity * animationController, 0.5, 0)}`;
+ nonSettingsBtns.style.transform = `translateX(${-(maxTX * animationController)}px)`;
  }
 
  mainContent.offsetHeight;
  settingsIcon.offsetHeight;
+ nonSettingsBtns.offsetHeight;
+
  mainContent.style.transition = "";
  settingsIcon.style.transition = "";
+ nonSettingsBtns.style.transition = "";
+
  const translatedY = initialY + clamped * Math.abs(scaleFactor);
 
  draggable.style.transform = `translate(0px, ${translatedY}px)`;
@@ -239,11 +255,22 @@
  mainContent.getAnimations().forEach((a) => a.cancel());
  };
  open = !open;
+ if (open) {
+ nonSettingsBtns.style.pointerEvents = "none";
+ } else {
+ nonSettingsBtns.style.pointerEvents = "auto";
+ }
  draggable.style.pointerEvents = "auto";
  }
 
  draggable.addEventListener("mousedown", mouseDown);
  });
+
+ const eraseChat = () => {
+ console.log($messagesStore);
+ $messagesStore = [];
+ console.log($messagesStore);
+ };
 </script>
 
 <div
@@ -277,17 +304,29 @@
  id="draggable"
  class="w-1/4 h-2 border-2 border-gray-200 bg-white border-b-white rounded-t-lg left-0 right-0 m-auto bottom-full absolute bg-gradient-to-t from-white to-gray-100"
  />
- <button
- bind:this={settingsIcon}
- class="fixed w-7 h-7 bottom-0 left-0 ml-4 transform z-10 mb-[14px] settingsIcon"
- on:click={toggleSettings}
- >
- <iconify-icon
- style="font-size: 28px;"
- class="cursor-pointer"
- icon="material-symbols:settings-outline-rounded"
- />
- </button>
+ <div class="-ml-2 z-10 mt-[-11px] flex w-fit gap-4">
+ <button
+ bind:this={settingsIcon}
+ class="w-7 h-7 transform settingsIcon"
+ on:click={toggleSettings}
+ >
+ <iconify-icon
+ style="font-size: 28px;"
+ class="cursor-pointer"
+ icon="material-symbols:settings-outline-rounded"
+ />
+ </button>
+ <div
+ style="opacity: {open ? 0 : 1}; transform: translateX({open ? -48 : 0}px)"
+ class="flex gap-4 non-settings"
+ bind:this={nonSettingsBtns}
+ >
+ <button class="w-7 h-7 transform" on:click={eraseChat}>
+ <iconify-icon style="font-size: 28px;" icon="icon-park-outline:clear-format"
+ ></iconify-icon>
+ </button>
+ </div>
+ </div>
  <div
  id="settings-form"
  bind:this={settingsPanel}
@@ -343,4 +382,9 @@
  .settingsIcon {
  transition: all 0.5s ease;
  }
+
+ .non-settings {
+ transition: 0.4s ease;
+ transition-property: opacity, transform;
+ }
 </style>

src/lib/components/TransitionalFunction.svelte

@@ -83,7 +83,7 @@
  delay: 250,
  },
  ).onfinish = () => {
- imgContainer.animate(
+ imgContainer?.animate(
  [
  {
  transform: "rotate(0deg)",
@@ -206,6 +206,7 @@
  fill: "forwards",
  },
  ).onfinish = () => {
+ if (!loadContainer) return;
  loadContainer.style.transformOrigin = "right";
  };
  };

src/lib/fncaller/index.ts

@@ -60,6 +60,9 @@ export class FunctionCaller<T extends FunctionSchema> {
  }
  async getFunction(query: string, history: Message[]) {
  const settings = get(settingsStore);
+ const date = new Date();
+ const day = date.toLocaleString("en-GB", { weekday: "long" });
+ const time = date.toLocaleString("en-GB", { hour: "numeric", minute: "numeric" });
  const res = await fetch(`${settings.ollamaUrl}/api/chat`, {
  method: "POST",
  body: JSON.stringify({
@@ -86,7 +89,9 @@ export class FunctionCaller<T extends FunctionSchema> {
  .slice(Math.max(history.length - 4, 0))
  .slice(0, -1)
  .map((h) => `${h.role}: ${h.content}`)
- .join("\n")}\n\nQuery: ${query}`,
+ .join(
+ "\n",
+ )}\n\nQuery: ${query}\n\nCurrent date (DD/MM/YYYY): ${day} ${date.toLocaleDateString()}`,
  },
  ],
  stream: false,
@@ -160,7 +165,7 @@ export class FunctionCaller<T extends FunctionSchema> {
  },
  );
 
- return eval(transpiled)?.(fnParams as any, addOpt);
+ return eval(transpiled)?.(fnParams as any, addOpt, get(settingsStore));
  }
 
  getIcon(fn: keyof T) {
@@ -198,4 +203,12 @@ export const toolsStore = writable<{
  fns: {},
 });
 
-export const messagesStore = writable<Message[]>([]);
+export const messagesStore = writable<
+ (Message & {
+ sources?: {
+ title: string;
+ url: string;
+ }[];
+ title?: string;
+ })[]
+>([]);

src/lib/settings/index.ts

@@ -26,6 +26,11 @@ export const settingsSchema = {
  type: "boolean",
  default: true,
  },
+ ballTransition: {
+ label: "Ball Transition Duration",
+ type: "number",
+ default: 150,
+ },
 } as const;
 
 type ReadOnlyStore = Partial<{