AP-25499: Use the SkeletonItem component for K-AI

The bespoke skeleton animation used in loading messages for K-AI had a
bit of a short animation cycle, leading to visual jumpiness. In this PR,
we use the `SkeletonItem` component instead.

+ Very small styling adjustments in related areas to improve spacing a
little bit.

Author: iusethemouse

org.knime.ui.js/src/components/kai/chat/message/KaiStatus.vue

@@ -33,6 +33,7 @@ const props = defineProps<Props>();
   flex-direction: row;
   align-items: center;
   gap: 5px;
+  padding-top: var(--space-12);
 
   & svg.loading-icon {
     animation: rotate-animation 2s linear infinite;

org.knime.ui.js/src/components/kai/chat/message/Message.vue

@@ -158,7 +158,7 @@ const displayContent = computed(() => {
   & .body {
     border-radius: 0 5px 5px;
     background-color: var(--knime-white);
-    padding: 10px 8px;
+    padding: var(--space-12);
 
     &.user {
       border-radius: 5px 0 5px 5px;

org.knime.ui.js/src/components/kai/chat/message/MessagePlaceholder.vue

@@ -1,35 +1,18 @@
+<script setup lang="ts">
+import { SkeletonItem } from "@knime/components";
+</script>
+
 <template>
-  <div>
-    <div class="animation" />
-    <div class="animation" />
+  <div class="skeleton-container">
+    <SkeletonItem width="80%" height="16px" />
+    <SkeletonItem width="100%" height="16px" />
   </div>
 </template>
 
 <style lang="postcss" scoped>
-@import url("@/assets/mixins.css");
-
-@keyframes rotate-animation {
-  0% {
-    transform: rotate(360deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-& .animation {
-  display: inline-block;
-  width: 100%;
-  height: 18px;
-  background: linear-gradient(
-    to right,
-    var(--knime-porcelain) 0%,
-    var(--knime-silver-sand-semi) 25%,
-    var(--knime-porcelain) 50%
-  );
-  background-size: 200px 20px;
-  background-position: -50px 0;
-  animation: knight-rider 2s linear infinite;
+.skeleton-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
 }
 </style>