Rough out chat

2024-10-08 11:39:16 -07:00
parent 7ffd02b736
commit 8698dcc359
59 changed files with 833 additions and 437 deletions
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
-  import {ellipsize, ctx, ago, remove} from '@welshman/lib'
-  import {WRAP} from '@welshman/util'
-  import {pubkey, subscribe} from '@welshman/app'
+  import {onMount} from "svelte"
+  import {ctx, ago, remove} from "@welshman/lib"
+  import {WRAP} from "@welshman/util"
+  import {pubkey, subscribe} from "@welshman/app"
  import {fly} from "@lib/transition"
  import Icon from "@lib/components/Icon.svelte"
  import Page from "@lib/components/Page.svelte"
@@ -16,8 +16,8 @@
  import ProfileCircle from "@app/components/ProfileCircle.svelte"
  import ProfileCircles from "@app/components/ProfileCircles.svelte"
  import ChatStart from "@app/components/ChatStart.svelte"
-  import {chatSearch, pullConservatively} from '@app/state'
-  import {pushModal} from '@app/modal'
+  import {chatSearch, pullConservatively} from "@app/state"
+  import {pushModal} from "@app/modal"

  const startChat = () => pushModal(ChatStart)

@@ -26,7 +26,7 @@
  $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)

  onMount(() => {
-    const filter = {kinds: [WRAP], '#p': [$pubkey!]}
+    const filter = {kinds: [WRAP], "#p": [$pubkey!]}
    const sub = subscribe({filters: [{...filter, since: ago(30)}]})

    pullConservatively({
@@ -64,29 +64,33 @@
      </SecondaryNavHeader>
    </div>
  </SecondaryNavSection>
-  <label class="input input-bordered input-sm flex items-center gap-2 mx-6 -mt-4" in:fly={{delay: 200}}>
+  <label
+    class="input input-sm input-bordered mx-6 -mt-4 flex items-center gap-2"
+    in:fly={{delay: 200}}>
    <Icon icon="magnifer" />
    <input bind:value={term} class="grow" type="text" />
  </label>
  <div class="overflow-auto">
-    {#each chats as {id, pubkeys, messages}, i (id)}
+    {#each chats as { id, pubkeys, messages }, i (id)}
      {@const message = messages[0]}
      {@const others = remove($pubkey, pubkeys)}
-      <div class="px-6 py-2 border-t border-base-100 border-solid hover:bg-base-100 transition-colors cursor-pointer">
+      <div
+        class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100">
        <Link class="flex flex-col justify-start gap-1" href="/home/{id}">
-          <div class="flex gap-2 items-center">
+          <div class="flex items-center gap-2">
            {#if others.length === 1}
              <ProfileCircle pubkey={others[0]} size={5} />
              <Name pubkey={others[0]} />
            {:else}
              <ProfileCircles pubkeys={others} size={5} />
-              <p class="whitespace-nowrap overflow-hidden text-ellipsis">
+              <p class="overflow-hidden text-ellipsis whitespace-nowrap">
                <Name pubkey={others[0]} />
-                and {others.length - 1} {others.length > 2 ? 'others' : 'other'}
+                and {others.length - 1}
+                {others.length > 2 ? "others" : "other"}
              </p>
            {/if}
          </div>
-          <p class="text-sm whitespace-nowrap overflow-hidden text-ellipsis">
+          <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
            {message.content}
          </p>
        </Link>
@@ -8,9 +8,10 @@

  const browseSpaces = () => goto("/discover")

-  const leaveFeedback = () => goto("/home/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322")
+  const leaveFeedback = () =>
+    goto("/home/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322")

-  const donate = () => window.open('https://geyser.fund/project/flotilla')
+  const donate = () => window.open("https://geyser.fund/project/flotilla")
 </script>

 <div class="hero min-h-screen bg-base-200">
@@ -0,0 +1,136 @@
+<script lang="ts" context="module">
+  type Element = {
+    id: string
+    type: "date" | "note"
+    value: string | TrustedEvent
+    showPubkey: boolean
+  }
+</script>
+
+<script lang="ts">
+  import {page} from "$app/stores"
+  import {ctx, uniq, sortBy, remove} from "@welshman/lib"
+  import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
+  import {Nip59} from "@welshman/signer"
+  import {
+    pubkey,
+    signer,
+    formatTimestampAsDate,
+    tagPubkey,
+    makeThunk,
+    publishThunk,
+  } from "@welshman/app"
+  import {fly} from "@lib/transition"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import Name from "@app/components/Name.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import ChatMessage from "@app/components/ChatMessage.svelte"
+  import ChatCompose from "@app/components/ChannelCompose.svelte"
+  import {deriveChat, splitChatId} from "@app/state"
+
+  const {chat: id} = $page.params
+  const chat = deriveChat(id)
+  const pubkeys = splitChatId(id)
+  const others = remove($pubkey, pubkeys)
+
+  const assertEvent = (e: any) => e as TrustedEvent
+
+  const onSubmit = async ({content, ...params}: EventContent) => {
+    const tags = [...params.tags, ...pubkeys.map(pubkey => tagPubkey(pubkey))]
+    const template = createEvent(DIRECT_MESSAGE, {content, tags})
+    const nip59 = Nip59.fromSigner($signer!)
+
+    for (const recipient of uniq(pubkeys)) {
+      const rumor = await nip59.wrap(recipient, template)
+
+      publishThunk(
+        makeThunk({
+          event: rumor.wrap,
+          relays: ctx.app.router.PublishMessage(recipient).getUrls(),
+        }),
+      )
+    }
+  }
+
+  let loading = true
+  let elements: Element[] = []
+
+  $: {
+    elements = []
+
+    let previousDate
+    let previousPubkey
+
+    for (const event of sortBy(e => e.created_at, $chat?.messages || [])) {
+      const {id, pubkey, created_at} = event
+      const date = formatTimestampAsDate(created_at)
+
+      if (date !== previousDate) {
+        elements.push({type: "date", value: date, id: date, showPubkey: false})
+      }
+
+      elements.push({
+        id,
+        type: "note",
+        value: event,
+        showPubkey: date !== previousDate || previousPubkey !== pubkey,
+      })
+
+      previousDate = date
+      previousPubkey = pubkey
+    }
+
+    elements.reverse()
+  }
+
+  setTimeout(() => {
+    loading = false
+  }, 3000)
+</script>
+
+<div class="relative flex h-screen flex-col">
+  <div class="relative z-feature mx-2 rounded-xl pt-4">
+    <div
+      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+      <div class="flex items-center gap-2">
+        {#if others.length === 1}
+          <ProfileCircle pubkey={others[0]} size={5} />
+          <Name pubkey={others[0]} />
+        {:else}
+          <ProfileCircles pubkeys={others} size={5} />
+          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+            <Name pubkey={others[0]} />
+            and {others.length - 1}
+            {others.length > 2 ? "others" : "other"}
+          </p>
+        {/if}
+      </div>
+    </div>
+  </div>
+  <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
+    {#each elements as { type, id, value, showPubkey } (id)}
+      {#if type === "date"}
+        <Divider>{value}</Divider>
+      {:else}
+        <div in:fly>
+          <ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} />
+        </div>
+      {/if}
+    {/each}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner {loading}>
+        {#if loading}
+          Looking for messages...
+        {:else}
+          End of message history
+        {/if}
+      </Spinner>
+    </p>
+  </div>
+  <div class="shadow-top-xl border-t border-solid border-base-100 bg-base-100">
+    <ChatCompose {onSubmit} />
+  </div>
+</div>
@@ -1,48 +1,47 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
-  import {derived} from 'svelte/store'
-  import {createScroller} from '@lib/html'
-  import {shuffle, sortBy, sleep, ago, DAY, HOUR, pushToMapKey} from '@welshman/lib'
-  import {getListValues, getAncestorTagValues, NOTE, REACTION} from '@welshman/util'
-  import type {TrustedEvent} from '@welshman/util'
-  import {deriveEvents} from '@welshman/store'
-  import {profileSearch, repository, userFollows, load} from '@welshman/app'
-  import Spinner from '@lib/components/Spinner.svelte'
-  import NoteCard from '@app/components/NoteCard.svelte'
-  import Content from '@app/components/Content.svelte'
+  import {onMount} from "svelte"
+  import {derived} from "svelte/store"
+  import {createScroller} from "@lib/html"
+  import {sortBy, sleep, ago, DAY, HOUR, pushToMapKey} from "@welshman/lib"
+  import {
+    getListTags,
+    getPubkeyTagValues,
+    getAncestorTagValues,
+    NOTE,
+    REACTION,
+  } from "@welshman/util"
+  import type {TrustedEvent} from "@welshman/util"
+  import {deriveEvents} from "@welshman/store"
+  import {repository, userFollows, load} from "@welshman/app"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import NoteCard from "@app/components/NoteCard.svelte"
+  import Content from "@app/components/Content.svelte"

  let element: Element
-  let loading = sleep(3000)
  let events: TrustedEvent[] = []

  const since = ago(DAY)
-  const authors = getListValues("p", $userFollows)
+  const loading = sleep(3000)
+  const authors = getPubkeyTagValues(getListTags($userFollows))
  const notesFilter = {kinds: [NOTE], authors, since}
  const notes = deriveEvents(repository, {filters: [notesFilter]})
-  const reactionsFilter = {kinds: [REACTION], '#p': authors, since}
+  const reactionsFilter = {kinds: [REACTION], "#p": authors, since}
  const reactions = deriveEvents(repository, {filters: [reactionsFilter]})
-  const reactionsByParent = derived(
-    reactions,
-    $reactions => {
-      const $reactionsByParent = new Map<string, TrustedEvent[]>()
+  const reactionsByParent = derived(reactions, $reactions => {
+    const $reactionsByParent = new Map<string, TrustedEvent[]>()

-      for (const event of $reactions) {
-        const [parentId] = getAncestorTagValues(event.tags).replies
+    for (const event of $reactions) {
+      const [parentId] = getAncestorTagValues(event.tags).replies

-        if (parentId) {
-          pushToMapKey($reactionsByParent, parentId, event)
-        }
+      if (parentId) {
+        pushToMapKey($reactionsByParent, parentId, event)
      }
-
-      return $reactionsByParent
    }
-  )

-  const isLike = (e: TrustedEvent) =>
-    e.kind === REACTION && ["+", ""].includes(e.content)
+    return $reactionsByParent
+  })

-  const isReplyOf = (e: TrustedEvent, p: TrustedEvent) =>
-    getAncestorTagValues(e.tags).replies.includes(e.id)
+  const isLike = (e: TrustedEvent) => e.kind === REACTION && ["+", ""].includes(e.content)

  const scoreEvent = (e: TrustedEvent) => {
    const thisReactions = $reactionsByParent.get(e.id) || []
@@ -57,12 +56,12 @@
    load({filters: [notesFilter, reactionsFilter]})

    const scroller = createScroller({
-      element: element.closest('.max-h-screen')!,
+      element: element.closest(".max-h-screen")!,
      onScroll: () => {
        const seen = new Set(events.map(e => e.id))
        const eligible = sortBy(
          scoreEvent,
-          $notes.filter(e => !seen.has(e.id) && getAncestorTagValues(e.tags).replies.length === 0)
+          $notes.filter(e => !seen.has(e.id) && getAncestorTagValues(e.tags).replies.length === 0),
        )

        events = [...events, ...eligible.slice(0, 10)]
@@ -73,7 +72,6 @@
  })
 </script>

-
 <div class="content column gap-4" bind:this={element}>
  {#await loading}
    <div class="center my-20">
@@ -1,25 +1,23 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
-  import {createScroller} from '@lib/html'
-  import Icon from '@lib/components/Icon.svelte'
-  import {shuffle} from '@welshman/lib'
-  import {getListValues} from '@welshman/util'
-  import {profileSearch, userFollows} from '@welshman/app'
-  import PeopleItem from '@app/components/PeopleItem.svelte'
+  import {onMount} from "svelte"
+  import {createScroller} from "@lib/html"
+  import Icon from "@lib/components/Icon.svelte"
+  import {shuffle} from "@welshman/lib"
+  import {getPubkeyTagValues, getListTags} from "@welshman/util"
+  import {profileSearch, userFollows} from "@welshman/app"
+  import PeopleItem from "@app/components/PeopleItem.svelte"

-  const defaultPubkeys = shuffle(getListValues("p", $userFollows))
+  const defaultPubkeys = shuffle(getPubkeyTagValues(getListTags($userFollows)))

  let term = ""
  let limit = 10
  let element: Element

-  $: pubkeys = term
-    ? $profileSearch.searchValues(term)
-    : defaultPubkeys
+  $: pubkeys = term ? $profileSearch.searchValues(term) : defaultPubkeys

  onMount(() => {
    const scroller = createScroller({
-      element: element.closest('.max-h-screen')!,
+      element: element.closest(".max-h-screen")!,
      onScroll: () => {
        limit += 10
      },
@@ -29,7 +27,6 @@
  })
 </script>

-
 <div class="content column gap-4" bind:this={element}>
  <h1 class="superheading mt-20">People</h1>
  <p class="text-center">Get the latest from people in your network</p>