From b856c2b8b5e6df152d85bd361f1cb31e17d4c787 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 30 May 2023 14:44:36 +0700
Subject: [PATCH] update chat message form
---
src/app/channel/components/item.tsx | 2 -
src/app/channel/components/messages/item.tsx | 4 +-
src/app/channel/layout.tsx | 1 -
src/app/chat/components/messages/form.tsx | 10 +-
src/app/chat/components/messages/item.tsx | 4 +-
src/app/chat/components/messages/user.tsx | 2 +-
src/app/chat/pages/index.page.tsx | 4 +-
src/shared/icons/enter.tsx | 24 +++++
src/shared/icons/index.tsx | 2 +
src/shared/icons/media.tsx | 27 ++++++
src/shared/mediaUploader.tsx | 97 ++++++++++++++++++++
src/shared/tooltip.tsx | 2 +-
vite.config.ts | 54 +++++------
13 files changed, 192 insertions(+), 41 deletions(-)
create mode 100644 src/shared/icons/enter.tsx
create mode 100644 src/shared/icons/media.tsx
create mode 100644 src/shared/mediaUploader.tsx
diff --git a/src/app/channel/components/item.tsx b/src/app/channel/components/item.tsx
index d80504e1..fe1ff685 100644
--- a/src/app/channel/components/item.tsx
+++ b/src/app/channel/components/item.tsx
@@ -1,7 +1,5 @@
import { useChannelProfile } from "@app/channel/hooks/useChannelProfile";
-
import { usePageContext } from "@utils/hooks/usePageContext";
-
import { twMerge } from "tailwind-merge";
export function ChannelsListItem({ data }: { data: any }) {
diff --git a/src/app/channel/components/messages/item.tsx b/src/app/channel/components/messages/item.tsx
index ca50f7bd..1ee59432 100644
--- a/src/app/channel/components/messages/item.tsx
+++ b/src/app/channel/components/messages/item.tsx
@@ -3,8 +3,8 @@ import { MessageMuteButton } from "@app/channel/components/messages/muteButton";
import { MessageReplyButton } from "@app/channel/components/messages/replyButton";
import { ChannelMessageUser } from "@app/channel/components/messages/user";
import { MentionNote } from "@app/note/components/mentions/note";
-import ImagePreview from "@app/note/components/preview/image";
-import VideoPreview from "@app/note/components/preview/video";
+import { ImagePreview } from "@app/note/components/preview/image";
+import { VideoPreview } from "@app/note/components/preview/video";
import { noteParser } from "@utils/parser";
import { useMemo, useState } from "react";
diff --git a/src/app/channel/layout.tsx b/src/app/channel/layout.tsx
index 2acd7224..a2cb7444 100644
--- a/src/app/channel/layout.tsx
+++ b/src/app/channel/layout.tsx
@@ -1,4 +1,3 @@
-import { AppHeader } from "@shared/appHeader";
import { MultiAccounts } from "@shared/multiAccounts";
import { Navigation } from "@shared/navigation";
diff --git a/src/app/chat/components/messages/form.tsx b/src/app/chat/components/messages/form.tsx
index 0871f002..1ac301a7 100644
--- a/src/app/chat/components/messages/form.tsx
+++ b/src/app/chat/components/messages/form.tsx
@@ -1,3 +1,5 @@
+import { EnterIcon } from "@shared/icons";
+import { MediaUploader } from "@shared/mediaUploader";
import { RelayContext } from "@shared/relayProvider";
import { useChatMessages } from "@stores/chats";
import { WRITEONLY_RELAYS } from "@stores/constants";
@@ -60,7 +62,7 @@ export function ChatMessageForm({
};
return (
-
+
setValue(e.target.value)}
@@ -70,12 +72,14 @@ export function ChatMessageForm({
className="relative h-11 w-full resize-none rounded-md px-5 !outline-none bg-zinc-800 placeholder:text-zinc-500"
/>
-
+
+
diff --git a/src/app/chat/components/messages/item.tsx b/src/app/chat/components/messages/item.tsx
index 1d0de5cf..73456eec 100644
--- a/src/app/chat/components/messages/item.tsx
+++ b/src/app/chat/components/messages/item.tsx
@@ -1,8 +1,8 @@
import { ChatMessageUser } from "@app/chat/components/messages/user";
import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage";
import { MentionNote } from "@app/note/components/mentions/note";
-import ImagePreview from "@app/note/components/preview/image";
-import VideoPreview from "@app/note/components/preview/video";
+import { ImagePreview } from "@app/note/components/preview/image";
+import { VideoPreview } from "@app/note/components/preview/video";
import { noteParser } from "@utils/parser";
import { memo } from "react";
diff --git a/src/app/chat/components/messages/user.tsx b/src/app/chat/components/messages/user.tsx
index acf9dc43..e8f491f4 100644
--- a/src/app/chat/components/messages/user.tsx
+++ b/src/app/chat/components/messages/user.tsx
@@ -35,7 +35,7 @@ export function ChatMessageUser({
-
+
{user?.nip05 || user?.name || shortenKey(pubkey)}
ยท
diff --git a/src/app/chat/pages/index.page.tsx b/src/app/chat/pages/index.page.tsx
index 0f96aea5..51d01d74 100644
--- a/src/app/chat/pages/index.page.tsx
+++ b/src/app/chat/pages/index.page.tsx
@@ -18,11 +18,11 @@ export function Page() {
const searchParams: any = pageContext.urlParsed.search;
const pubkey = searchParams.pubkey;
- const [fetchMessages, addMessage, clear] = useChatMessages((state: any) => [
+ const [fetchMessages, clear] = useChatMessages((state: any) => [
state.fetch,
- state.add,
state.clear,
]);
+ const addMessage = useChatMessages((state: any) => state.add);
useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => {
const unsubscribe = pool.subscribe(
diff --git a/src/shared/icons/enter.tsx b/src/shared/icons/enter.tsx
new file mode 100644
index 00000000..cf9acf7b
--- /dev/null
+++ b/src/shared/icons/enter.tsx
@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function EnterIcon(
+ props: JSX.IntrinsicAttributes & SVGProps,
+) {
+ return (
+
+ );
+}
diff --git a/src/shared/icons/index.tsx b/src/shared/icons/index.tsx
index 2dc554b5..421a42f2 100644
--- a/src/shared/icons/index.tsx
+++ b/src/shared/icons/index.tsx
@@ -9,12 +9,14 @@ export * from "./chevronRight";
export * from "./compose";
export * from "./copy";
export * from "./edit";
+export * from "./enter";
export * from "./eyeOff";
export * from "./eyeOn";
export * from "./heartbeat";
export * from "./hide";
export * from "./like";
export * from "./lume";
+export * from "./media";
export * from "./mute";
export * from "./myspace";
export * from "./navArrowDown";
diff --git a/src/shared/icons/media.tsx b/src/shared/icons/media.tsx
new file mode 100644
index 00000000..cf4a57fb
--- /dev/null
+++ b/src/shared/icons/media.tsx
@@ -0,0 +1,27 @@
+import { SVGProps } from "react";
+
+export function MediaIcon(
+ props: JSX.IntrinsicAttributes & SVGProps,
+) {
+ return (
+
+ );
+}
diff --git a/src/shared/mediaUploader.tsx b/src/shared/mediaUploader.tsx
new file mode 100644
index 00000000..9a6cda2d
--- /dev/null
+++ b/src/shared/mediaUploader.tsx
@@ -0,0 +1,97 @@
+import { MediaIcon } from "@shared/icons";
+import { Tooltip } from "@shared/tooltip";
+import { open } from "@tauri-apps/api/dialog";
+import { Body, fetch } from "@tauri-apps/api/http";
+import { createBlobFromFile } from "@utils/createBlobFromFile";
+import { useState } from "react";
+
+export function MediaUploader({ setState }: { setState: any }) {
+ const [loading, setLoading] = useState(false);
+
+ const openFileDialog = async () => {
+ const selected: any = await open({
+ multiple: false,
+ filters: [
+ {
+ name: "Image & Video",
+ extensions: ["png", "jpeg", "jpg", "gif", "mp4", "mov"],
+ },
+ ],
+ });
+ if (Array.isArray(selected)) {
+ // user selected multiple files
+ } else if (selected === null) {
+ // user cancelled the selection
+ } else {
+ // start loading
+ setLoading(true);
+
+ const filename = selected.split("/").pop();
+ const file = await createBlobFromFile(selected);
+ const buf = await file.arrayBuffer();
+
+ const res: { data: { file: { id: string } } } = await fetch(
+ "https://void.cat/upload?cli=false",
+ {
+ method: "POST",
+ timeout: 5,
+ headers: {
+ accept: "*/*",
+ "Content-Type": "application/octet-stream",
+ "V-Filename": filename,
+ "V-Description": "Upload from https://lume.nu",
+ "V-Strip-Metadata": "true",
+ },
+ body: Body.bytes(buf),
+ },
+ );
+
+ const image = `https://void.cat/d/${res.data.file.id}.webp`;
+
+ // update state
+ setState((prev: string) => `${prev}\n${image}`);
+ // stop loading
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/src/shared/tooltip.tsx b/src/shared/tooltip.tsx
index e7548e1f..b1cdec8d 100644
--- a/src/shared/tooltip.tsx
+++ b/src/shared/tooltip.tsx
@@ -42,7 +42,7 @@ export function Tooltip({
{isOpen && (
`__tla_${i}`,
- }),
- ],
+ clearScreen: false,
+ server: {
+ strictPort: true,
+ },
+ envPrefix: ["VITE_", "TAURI_"],
+ build: {
+ // Tauri uses Chromium on Windows and WebKit on macOS and Linux
+ target: process.env.TAURI_PLATFORM === "windows" ? "chrome105" : "safari13",
+ // don't minify for debug builds
+ minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
+ // produce sourcemaps for debug builds
+ sourcemap: !!process.env.TAURI_DEBUG,
+ },
+ plugins: [
+ react(),
+ ssr({ prerender: true }),
+ viteTsconfigPaths(),
+ topLevelAwait({
+ promiseExportName: "__tla",
+ promiseImportName: (i) => `__tla_${i}`,
+ }),
+ ],
});