playing with layout a bit - this is a discord-y option (#7115)

open-chat-labs · Dec 23, 2024 · ef2d393 · ef2d393
1 parent b9f0d6e
commit ef2d393
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 40 deletions.
diff --git a/frontend/app/src/components/bots/BotMessageContext.svelte b/frontend/app/src/components/bots/BotMessageContext.svelte
@@ -1,25 +1,35 @@
 <script lang="ts">
-    import type { BotMessageContext } from "openchat-client";
+    import { AvatarSize, OpenChat, userStore, type BotMessageContext } from "openchat-client";
     import Markdown from "../home/Markdown.svelte";
+    import Avatar from "../Avatar.svelte";
+    import { getContext } from "svelte";
+
+    const client = getContext<OpenChat>("client");
 
     interface Props {
         botContext: BotMessageContext;
+        botName: string;
     }
 
     let { botContext }: Props = $props();
 
-    let text = $derived(
-        `@UserId(${botContext.initiator}) executed command ${botContext.commandText}`,
-    );
+    let text = $derived(`@UserId(${botContext.initiator}) used **${botContext.commandText}**`);
+    let user = $derived($userStore.get(botContext.initiator));
 </script>
 
 <div class="bot-context">
+    {#if user}
+        <Avatar url={client.userAvatarUrl(user)} userId={user.userId} size={AvatarSize.Tiny} />
+    {/if}
     <Markdown {text} />
 </div>
 
 <style lang="scss">
     .bot-context {
         @include font(light, normal, fs-80);
-        margin-bottom: $sp4;
+        color: var(--txt-light);
+        display: flex;
+        gap: $sp2;
+        align-items: center;
     }
 </style>
diff --git a/frontend/app/src/components/home/ChatMessage.svelte b/frontend/app/src/components/home/ChatMessage.svelte
@@ -454,6 +454,12 @@
                     </div>
                 {/if}
 
+                {#if botContext !== undefined}
+                    <div class="bot-context">
+                        <BotMessageContext botName={senderDisplayName} {botContext} />
+                    </div>
+                {/if}
+
                 <!-- svelte-ignore a11y-no-static-element-interactions -->
                 <div
                     bind:this={msgBubbleElement}
@@ -476,42 +482,36 @@
                     class:readByMe
                     class:crypto
                     class:failed
+                    class:bot={botContext !== undefined}
                     class:p2pSwap={isP2PSwap}
                     class:proposal={isProposal && !inert}
                     class:thread={inThread}
                     class:rtl={$rtlStore}>
                     {#if first && !isProposal && !isPrize}
                         <div class="sender" class:fill class:rtl={$rtlStore}>
-                            {#if botContext !== undefined}
-                                <BotMessageContext {botContext} />
-                            {:else}
-                                <Link underline={"never"} on:click={openUserProfile}>
-                                    <h4 class="username" class:fill class:crypto>
-                                        {senderDisplayName}
-                                    </h4>
-                                    <Badges
-                                        uniquePerson={sender?.isUniquePerson}
-                                        diamondStatus={sender?.diamondStatus}
-                                        streak={client.getStreak(sender?.userId)} />
-                                    {#if sender !== undefined && multiUserChat}
-                                        <WithRole
-                                            userId={sender.userId}
-                                            chatMembers={$chatMembersMap}
-                                            communityMembers={$communityMembers}
-                                            let:chatRole
-                                            let:communityRole>
-                                            <RoleIcon
-                                                level="community"
-                                                popup
-                                                role={communityRole} />
-                                            <RoleIcon
-                                                level={chatType === "channel" ? "channel" : "group"}
-                                                popup
-                                                role={chatRole} />
-                                        </WithRole>
-                                    {/if}
-                                </Link>
-                            {/if}
+                            <Link underline={"never"} on:click={openUserProfile}>
+                                <h4 class="username" class:fill class:crypto>
+                                    {senderDisplayName}
+                                </h4>
+                                <Badges
+                                    uniquePerson={sender?.isUniquePerson}
+                                    diamondStatus={sender?.diamondStatus}
+                                    streak={client.getStreak(sender?.userId)} />
+                                {#if sender !== undefined && multiUserChat}
+                                    <WithRole
+                                        userId={sender.userId}
+                                        chatMembers={$chatMembersMap}
+                                        communityMembers={$communityMembers}
+                                        let:chatRole
+                                        let:communityRole>
+                                        <RoleIcon level="community" popup role={communityRole} />
+                                        <RoleIcon
+                                            level={chatType === "channel" ? "channel" : "group"}
+                                            popup
+                                            role={chatRole} />
+                                    </WithRole>
+                                {/if}
+                            </Link>
                             {#if senderTyping}
                                 <span class="typing">
                                     <Typing />
@@ -804,10 +804,21 @@
         }
     }
 
+    .bot-context {
+        position: absolute;
+        top: -7px;
+        left: $avatar-width;
+
+        @include mobile() {
+            left: $avatar-width-mob;
+        }
+    }
+
     .message {
         display: flex;
         justify-content: flex-start;
         margin-bottom: $sp2;
+        position: relative;
 
         .avatar-col {
             flex: 0 0 $avatar-width;
@@ -862,6 +873,10 @@
         border: var(--currentChat-msg-bd);
         box-shadow: var(--currentChat-msg-sh);
 
+        &.bot {
+            margin-top: $sp4;
+        }
+
         &.proposal {
             max-width: 800px;
             width: 100%;

diff --git a/frontend/openchat-agent/src/services/externalBot/externalBot.ts b/frontend/openchat-agent/src/services/externalBot/externalBot.ts
@@ -17,8 +17,8 @@ const ApiBotResponse = Type.Union([
         Success: Type.Object({
             message: Type.Optional(
                 Type.Object({
-                    message_id: Type.String(),
-                    message_content: MessageContent,
+                    id: Type.BigInt(),
+                    content: MessageContent,
                 }),
             ),
         }),
@@ -92,10 +92,10 @@ function externalBotResponse(value: ApiBotResponse): BotCommandResponse {
     if ("Success" in value) {
         return {
             kind: "success",
-            placeholder: mapOptional(value.Success.message, ({ message_id, message_content }) => {
+            placeholder: mapOptional(value.Success.message, ({ id, content }) => {
                 return {
-                    messageId: BigInt(message_id),
-                    messageContent: messageContent(message_content, ""),
+                    messageId: BigInt(id),
+                    messageContent: messageContent(content, ""),
                 };
             }),
         };