changelog + show update message

packages/web/src/tabs/ChangelogTab.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" context="module">
+  export const matchingProps = [];
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+  import Markdown from '../elements/Markdown.svelte';
+
+  import axiosInstance from '../utility/axiosInstance';
+
+  let isLoading = false;
+  let text = null;
+
+  const handleLoad = async () => {
+    isLoading = true;
+    const resp = await axiosInstance.get('config/changelog');
+    text = resp.data;
+    isLoading = false;
+  };
+
+  onMount(() => {
+    handleLoad();
+  });
+</script>
+
+{#if isLoading}
+  <LoadingInfo message="Loading changelog" />
+{:else}
+  <div>
+    <Markdown source={text || ''} />
+  </div>
+{/if}
+
+<style>
+  div {
+    padding: 10px;
+    overflow: auto;
+    flex: 1;
+  }
+</style>

packages/web/src/tabs/index.js

@@ -17,6 +17,7 @@ import * as CommandListTab from './CommandListTab.svelte';
 import * as YamlEditorTab from './YamlEditorTab.svelte';
 import * as CompareModelTab from './CompareModelTab.svelte';
 import * as JsonTab from './JsonTab.svelte';
+import * as ChangelogTab from './ChangelogTab.svelte';
 
 export default {
   TableDataTab,
@@ -38,4 +39,5 @@ export default {
   YamlEditorTab,
   CompareModelTab,
   JsonTab,
+  ChangelogTab,
 };