sidebar: ai: loading skeleton

.config/ags/modules/.configuration/user_options.js

@@ -10,7 +10,7 @@ let configOptions = {
         'enhancements': true,
         'useHistory': true,
         'writingCursor': " ...", // Warning: Using weird characters can mess up Markdown rendering
-        'proxyUrl': '', // Can be "socks5://127.0.0.1:9050" or "http://127.0.0.1:8080" for example. Leave it blank if you don't need it.
+        'proxyUrl': null, // Can be "socks5://127.0.0.1:9050" or "http://127.0.0.1:8080" for example. Leave it blank if you don't need it.
     },
     'animations': {
         'choreographyDelay': 35,

.config/ags/modules/sideleft/apis/ai_chatmessage.js

@@ -3,7 +3,7 @@ import GtkSource from "gi://GtkSource?version=3.0";
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
-const { Box, Button, Label, Icon, Scrollable } = Widget;
+const { Box, Button, Label, Icon, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
 import md2pango from '../../.miscutils/md2pango.js';
@@ -77,7 +77,7 @@ const TextBlock = (content = '') => Label({
 
 Utils.execAsync(['bash', '-c', `rm ${LATEX_DIR}/*`])
     .then(() => Utils.execAsync(['bash', '-c', `mkdir -p ${LATEX_DIR}`]))
-    .catch(() => {  });
+    .catch(() => { });
 const Latex = (content = '') => {
     const latexViewArea = Box({
         // vscroll: 'never',
@@ -286,7 +286,25 @@ const MessageContent = (content) => {
 }
 
 export const ChatMessage = (message, modelName = 'Model') => {
+    const TextSkeleton = (extraClassName = '') => Box({
+        className: `sidebar-chat-message-skeletonline ${extraClassName}`,
+    })
     const messageContentBox = MessageContent(message.content);
+    const messageLoadingSkeleton = Box({
+        vertical: true,
+        className: 'spacing-v-5',
+        children: Array.from({ length: 3 }, (_, id) => TextSkeleton(`sidebar-chat-message-skeletonline-offset${id}`)),
+    })
+    const messageArea = Stack({
+        homogeneous: message.role !== 'user',
+        transition: 'crossfade',
+        transitionDuration: userOptions.animations.durationLarge,
+        children: {
+            'thinking': messageLoadingSkeleton,
+            'message': messageContentBox,
+        },
+        shown: message.thinking ? 'thinking' : 'message',
+    });
     const thisMessage = Box({
         className: 'sidebar-chat-message',
         homogeneous: true,
@@ -302,11 +320,15 @@ export const ChatMessage = (message, modelName = 'Model') => {
                         useMarkup: true,
                         label: (message.role == 'user' ? USERNAME : modelName),
                     }),
-                    messageContentBox,
+                    Box({
+                        homogeneous: true,
+                        className: 'sidebar-chat-messagearea',
+                        children: [messageArea]
+                    })
                 ],
                 setup: (self) => self
                     .hook(message, (self, isThinking) => {
-                        messageContentBox.toggleClassName('thinking', message.thinking);
+                        messageArea.shown = message.thinking ? 'thinking' : 'message';
                     }, 'notify::thinking')
                     .hook(message, (self) => { // Message update
                         messageContentBox.attribute.fullUpdate(messageContentBox, message.content, message.role != 'user');