webui: fix SystemInfo position

Author: olegshulyakov

tools/server/webui/src/App.tsx

@@ -37,7 +37,6 @@ function AppLayout() {
       >
         <Header />
         <Outlet />
-        <ServerInfo />
       </main>
       {
         <SettingDialog
@@ -50,37 +49,4 @@ function AppLayout() {
   );
 }
 
-function ServerInfo() {
-  const { serverProps } = useAppContext();
-  const modalities = [];
-  if (serverProps?.modalities?.audio) {
-    modalities.push('audio');
-  }
-  if (serverProps?.modalities?.vision) {
-    modalities.push('vision');
-  }
-  return (
-    <div
-      className="sticky bottom-0 w-full pb-1 text-base-content/70 text-xs text-center"
-      tabIndex={0}
-      aria-description="Server information"
-    >
-      <span>
-        <b>Llama.cpp</b> {serverProps?.build_info}
-      </span>
-
-      <span className="sm:ml-2">
-        {modalities.length > 0 ? (
-          <>
-            <br className="sm:hidden" />
-            <b>Supported modalities:</b> {modalities.join(', ')}
-          </>
-        ) : (
-          ''
-        )}
-      </span>
-    </div>
-  );
-}
-
 export default App;

tools/server/webui/src/components/ChatScreen.tsx

@@ -296,7 +296,7 @@ function ChatInput({
       role="group"
       aria-label="Chat input"
       className={classNames({
-        'flex items-end pt-8 pb-1 sticky bottom-0 bg-base-100': true,
+        'flex flex-col items-end pt-8 sticky bottom-0 bg-base-100': true,
         'opacity-50': isDrag, // simply visual feedback to inform user that the file will be accepted
       })}
     >
@@ -423,6 +423,40 @@ function ChatInput({
           </div>
         )}
       </Dropzone>
+      <ServerInfo />
+    </div>
+  );
+}
+
+function ServerInfo() {
+  const { serverProps } = useAppContext();
+  const modalities = [];
+  if (serverProps?.modalities?.audio) {
+    modalities.push('audio');
+  }
+  if (serverProps?.modalities?.vision) {
+    modalities.push('vision');
+  }
+  return (
+    <div
+      className="sticky bottom-0 w-full pt-1 pb-1 text-base-content/70 text-xs text-center"
+      tabIndex={0}
+      aria-description="Server information"
+    >
+      <span>
+        <b>Llama.cpp</b> {serverProps?.build_info}
+      </span>
+
+      <span className="sm:ml-2">
+        {modalities.length > 0 ? (
+          <>
+            <br className="sm:hidden" />
+            <b>Supported modalities:</b> {modalities.join(', ')}
+          </>
+        ) : (
+          ''
+        )}
+      </span>
     </div>
   );
 }