tweaks

Author: mythz

AiServer/wwwroot/css/app.css

@@ -1620,6 +1620,10 @@ select{
   min-width: 100%;
 }
 
+.max-w-10 {
+  max-width: 2.5rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1664,6 +1668,10 @@ select{
   max-width: 20rem;
 }
 
+.max-w-96 {
+  max-width: 24rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }

AiServer/wwwroot/mjs/components/ConvertVideo.mjs

@@ -1,6 +1,6 @@
 import { ref, onMounted, inject, watch } from "vue"
 import { useClient, useFiles } from "@servicestack/vue"
-import { createErrorStatus } from "@servicestack/client"
+import { createErrorStatus, lastLeftPart, lastRightPart } from "@servicestack/client"
 import { ConvertVideo, ConvertVideoOutputFormat } from "../dtos.mjs"
 import { UiLayout, ThreadStorage, HistoryTitle, HistoryGroups, useUiLayout, icons, toArtifacts, acceptedVideos } from "../utils.mjs"
 import { ArtifactGallery, ArtifactDownloads } from "./Artifacts.mjs"
@@ -70,7 +70,7 @@ export default {
                 <div v-for="result in getThreadResults()" class="w-full ">
                     <div class="flex items-center justify-between">
                         <span class="my-4 flex justify-center items-center text-xl underline-offset-4">
-                            <span class="max-w-10 text-ellipsis">{{ result.response?.results?.[0]?.fileName || result.request.video }}</span>
+                            <span>{{ resultFileName(result) }}</span>
                         </span>
                         <div class="group flex cursor-pointer" @click="discardResult(result)">
                             <div class="ml-1 invisible group-hover:visible">discard</div>
@@ -259,6 +259,16 @@ export default {
                 }
             }
         }
+        
+        function resultFileName(result) {
+            const outFileName = result.response?.results?.[0]?.fileName
+            const srcName = lastLeftPart(result.request.video, '.')
+            if (outFileName) {
+                const outExt = lastRightPart(outFileName, '.')
+                return srcName + '.' + outExt
+            }
+            return result.request.video
+        }
 
         watch(() => routes.id, updated)
         watch(() => [
@@ -303,6 +313,7 @@ export default {
             acceptedVideos,
             renderKey,
             ConvertVideoOutputFormat,
+            resultFileName,
         }
     }
 }

AiServer/wwwroot/mjs/utils.mjs

@@ -273,7 +273,7 @@ export const HistoryGroups = {
             <h4 class="w-full pl-2 text-gray-500 uppercase pt-2 text-sm leading-6 font-semibold">{{group.title}}</h4>
             <div v-for="item in group.results">
                 <div v-href="{id:item.id}" :class="['pl-4 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 justify-between', 
-                    item.id == routes.id ? 'bg-gray-50 text-indigo-600 font-semibold' : 'cursor-pointer text-gray-700']">
+                    item.id == routes.id ? 'bg-gray-50 text-indigo-600 font-semibold' : 'cursor-pointer text-gray-700']" @dblclick="renameThread(item)">
                     <div class="md:w-64 overflow-hidden whitespace-nowrap text-ellipsis" 
                         @contextmenu.prevent.stop="showThreadMenu=showThreadMenu==item.id ? null : item.id">
                         <input v-if="renameThreadId === item.id" id="txtItemTitle" type="text" v-model="item.title" class="text-sm py-1 px-2 font-normal text-gray-700"