Add DM message replying-to indicators/previews and render embedded tweets

internal/webserver/static/styles.css

@@ -746,3 +746,37 @@ ul.dropdown-items {
 .dm-message-and-reacts-container p.posted-at {
     margin: 0 4.5em;
 }
+.dm-message-content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 80%;
+}
+.our-message .dm-message-content-container {
+    align-items: flex-end;
+}
+.dm-message-content-container .tweet-preview {
+    border-radius: 1em;
+    border: 1px solid var(--color-outline-gray);
+    max-width: 100%;
+}
+.dm-message-content-container .replying-to-container {
+    background-color: #f0f0f0f0;
+    border-radius: 1em 1em 1em 0em;
+    padding: 0.5em 1.2em 2em 1.2em;
+    margin: 0 0 -2em 0.2em;
+    font-size: 0.9em;
+}
+.our-message .dm-message-content-container .replying-to-container {
+    border-radius: 1em 1em 0em 1em;
+    margin: 0 0.2em -2em;
+}
+.dm-message-content-container .replying-to-label {
+    font-size: 0.8em;
+    display: flex;
+    gap: 0.2em;
+}
+.dm-message-content-container .replying-to-label img.svg-icon {
+    width: 1em;
+
+}

internal/webserver/tpl/tweet_page_includes/chat_view.tpl

@@ -11,7 +11,31 @@
               <img class="profile-image" src="/content/{{$user.GetProfileImageLocalPath}}" />
             </a>
           </div>
-          <div class="dm-message-text-container">{{template "text-with-entities" $message.Text}}</div>
+          <div class="dm-message-content-container">
+            {{if (ne $message.InReplyToID 0)}}
+              <div class="replying-to-container">
+                <div class="replying-to-label row">
+                  <img class="svg-icon" src="/static/icons/replying_to.svg" />
+                  <span>Replying to</span>
+                </div>
+                <div class="replying-to-message">
+                  {{(index $.DMTrove.Messages $message.InReplyToID).Text}}
+                </div>
+              </div>
+            {{end}}
+            {{if (ne $message.EmbeddedTweetID 0)}}
+              <div class="tweet-preview">
+                {{template "tweet" (dict
+                  "TweetID" $message.EmbeddedTweetID
+                  "RetweetID" 0
+                  "QuoteNestingLevel" 1)
+                }}
+              </div>
+            {{end}}
+            <div class="dm-message-text-container">
+              {{template "text-with-entities" $message.Text}}
+            </div>
+          </div>
         </div>
         <div class="dm-message-reactions">
           {{range $message.Reactions}}

pkg/persistence/dm_queries.go

@@ -337,5 +337,7 @@ func (p Profile) GetChatRoomContents(id DMChatRoomID) DMChatView {
 		}
 	}
 
+	p.fill_content(&ret.DMTrove.TweetTrove, UserID(0))
+
 	return ret
 }

pkg/persistence/dm_queries_test.go

@@ -171,7 +171,7 @@ func TestGetChatRoomsPreview(t *testing.T) {
 
 	msg, is_ok := chat_view.Messages[room.LastMessageID]
 	require.True(is_ok)
-	assert.Equal(msg.Text, "Check this out\nhttps://t.co/rHeWGgNIZ1")
+	assert.Equal(msg.Text, "Check this out")
 
 	require.Len(room.Participants, 2)
 	for _, user_id := range []UserID{1458284524761075714, 1488963321701171204} {

pkg/scraper/api_types_dms.go

@@ -26,7 +26,7 @@ type APIDMMessage struct {
 		ReplyData struct {
 			ID int `json:"id,string"`
 		} `json:"reply_data"`
-		Urls []struct {
+		URLs []struct {
 			Url     string `json:"url"`
 			Indices []int  `json:"indices"`
 		} `json:"urls"`
@@ -75,7 +75,7 @@ func (m APIDMMessage) ToDMTrove() DMTrove {
 	}
 	ret.Messages[result.ID] = result
 
-	// TODO: parse attached images
+	// TODO: parse attached images and videos
 
 	return ret
 }

sample_data/seed_data.sql

@@ -386,7 +386,7 @@ INSERT INTO chat_messages VALUES
     (1,1663623062195957773,'1458284524761075714-1488963321701171204',1488963321701171204,1685473621419,'',0,'Yes helo',0),
     (2,1663623203644751885,'1458284524761075714-1488963321701171204',1458284524761075714,1685473655064,'',0,'Yeah i know who you are lol',0),
     (3,1665922180176044037,'1458284524761075714-1488963321701171204',1458284524761075714,1686021773787,'',1663623062195957773,'Yes?',0),
-    (4,1665936253483614212,'1458284524761075714-1488963321701171204',1458284524761075714,1686025129132,'',0,replace('Check this out\nhttps://t.co/rHeWGgNIZ1','\n',char(10)),1665509126737129472),
+    (4,1665936253483614212,'1458284524761075714-1488963321701171204',1458284524761075714,1686025129132,'',0,replace('Check this out','\n',char(10)),1665509126737129472),
     (5,1665936253483614213,'1488963321701171204-1178839081222115328',1488963321701171204,1686025129140,'',0,'bruh1',0),
     (6,1665936253483614214,'1488963321701171204-1178839081222115328',1178839081222115328,1686025129141,'',0,'bruh2',0),
     (7,1665936253483614215,'1488963321701171204-1178839081222115328',1178839081222115328,1686025129142,'',1665936253483614214,'replying to bruh2',0),