Remove Tailwind and NPM dependency from chat template (#5846)

Co-authored-by: Steve Sanderson <[email protected]>
dotnet · Feb 5, 2025 · 3640389 · 3640389
1 parent bab8a9b
commit 3640389
Show file tree

Hide file tree

Showing 31 changed files with 4,533 additions and 114 deletions.
diff --git a/...s/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/.template.config/template.json b/...s/Microsoft.Extensions.AI.Templates/src/ChatWithCustomData/.template.config/template.json
@@ -228,7 +228,10 @@
         "sourceVariableName": "kestrelHttpPort",
         "fallbackVariableName": "kestrelHttpPortGenerated"
       },
-      "replaces": "5000"
+      "replaces": "5000",
+      "onlyIf": [{
+        "after": "localhost:"
+      }]
     },
     "kestrelHttpsPort": {
       "type": "parameter",
@@ -250,7 +253,10 @@
         "sourceVariableName": "kestrelHttpsPort",
         "fallbackVariableName": "kestrelHttpsPortGenerated"
       },
-      "replaces": "5001"
+      "replaces": "5001",
+      "onlyIf": [{
+        "after": "localhost:"
+      }]
     }
   }
 }
diff --git a/....Templates/src/ChatWithCustomData/ChatWithCustomData.Web/ChatWithCustomData.Web.csproj.in b/....Templates/src/ChatWithCustomData/ChatWithCustomData.Web/ChatWithCustomData.Web.csproj.in
@@ -1,7 +1,5 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
-  <Import Project="Tailwind.targets" />
-
   <PropertyGroup>
     <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
@@ -38,11 +36,5 @@
   <ItemGroup>
     <Content Include="Data\**" CopyToOutputDirectory="PreserveNewest" />
   </ItemGroup>
-
-  <Target Name="BuildNpmDependencies" BeforeTargets="PrepareForBuild"
-          Inputs="package-lock.json; rollup.config.js; wwwroot\lib.js" Outputs="wwwroot\lib.out.js">
-    <Exec Command="npm install" />
-    <Exec Command="npm run build" EnvironmentVariables="FORCE_COLOR=0" />
-  </Target>
 
 </Project>
diff --git a/...xtensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/App.razor b/...xtensions.AI.Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/App.razor
@@ -5,15 +5,15 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-    <link rel="stylesheet" href="@Assets["app.generated.css"]" />
+    <link rel="stylesheet" href="@Assets["app.css"]" />
     <link rel="stylesheet" href="@Assets["ChatWithCustomData.Web.styles.css"]" />
     <ImportMap />
     <HeadOutlet @rendermode="@renderMode" />
 </head>
 
 <body>
     <Routes @rendermode="@renderMode" />
-    <script src="lib.out.js"></script>
+    <script src="lib.js" type="module"></script>
     <script src="_framework/blazor.web.js"></script>
 </body>
 

diff --git a/....Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/Chat.razor b/....Templates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/Chat.razor
@@ -12,7 +12,7 @@
     <NoMessagesContent>Ask me anything about ChatWithCustomData.Web.</NoMessagesContent>
 </ChatMessageList>
 
-<div class="pt-3 pb-6 px-6 sticky bottom-0 border-t bg-gray-100">
+<div class="chat-container">
     <ChatSuggestions OnSelected="@AddUserMessageAsync" @ref="@chatSuggestions" />
     <ChatInput OnSend="@AddUserMessageAsync" @ref="@chatInput" />
 </div>

diff --git a/...plates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/Chat.razor.css b/...plates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/Chat.razor.css
@@ -0,0 +1,11 @@
+.chat-container {
+    position: sticky; 
+    bottom: 0; 
+    padding-left: 1.5rem;
+    padding-right: 1.5rem; 
+    padding-top: 0.75rem; 
+    padding-bottom: 1.5rem; 
+    border-top-width: 1px; 
+    background-color: #F3F4F6; 
+    border-color: #E5E7EB;
+}
diff --git a/...es/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatCitation.razor b/...es/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatCitation.razor
@@ -1,10 +1,10 @@
 @using System.Web
-<a href="@viewerUrl" target="_blank" class="citation inline-flex bg-white px-3 py-2 rounded mt-4 mr-4 gap-2 text-sm min-w-48">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+<a href="@viewerUrl" target="_blank" class="citation">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
     </svg>
-    <div class="flex flex-col">
-        <div class="font-semibold">@File</div>
+    <div class="citation-content">
+        <div class="citation-file">@File</div>
         <div>@Quote</div>
     </div>
 </a>

diff --git a/...rc/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatCitation.razor.css b/...rc/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatCitation.razor.css
@@ -1,11 +1,37 @@
 .citation {
+    display: inline-flex;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    margin-top: 1rem;
+    margin-right: 1rem;
     border-bottom: 2px solid #a770de;
+    gap: 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background-color: #ffffff;
 }
 
     .citation[href]:hover {
         outline: 1px solid #865cb1;
     }
 
+    .citation svg {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
     .citation:active {
         background-color: rgba(0,0,0,0.05);
     }
+
+.citation-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.citation-file {
+    font-weight: 600;
+}
diff --git a/...ates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatHeader.razor b/...ates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatHeader.razor
@@ -1,10 +1,9 @@
-<div class="p-6 main-background-gradient sticky top-0">
-    <div class="mb-6 page-width">
+<div class="chat-header-container main-background-gradient">
+    <div class="chat-header-controls page-width">
         <button class="btn-default" @onclick="@OnNewChat">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-700">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="new-chat-icon">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
             </svg>
-
             New chat
         </button>
     </div>

diff --git a/.../src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatHeader.razor.css b/.../src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatHeader.razor.css
@@ -0,0 +1,15 @@
+.chat-header-container {
+    position: sticky; 
+    top: 0; 
+    padding: 1.5rem; 
+}
+
+.chat-header-controls {
+    margin-bottom: 1.5rem; 
+}
+
+.new-chat-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: rgb(55, 65, 81);
+}
diff --git a/...lates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatInput.razor b/...lates/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatInput.razor
@@ -1,19 +1,19 @@
 @inject IJSRuntime JS
 
 <EditForm Model="@this" OnValidSubmit="@SendMessageAsync">
-    <label class="flex flex-col input-box page-width px-3 py-2 mt-3">
+    <label class="input-box page-width">
         <textarea @ref="@textArea" @bind="@messageText" placeholder="Type your message..." rows="1"></textarea>
 
-        <div class="tools flex items-center mt-4">
+        <div class="tools">
             <button type="button" title="Attach media file" class="btn-default attach">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tool-icon">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                 </svg>
                 Add content
             </button>
 
-            <button type="submit" title="Send" class="send-button ml-auto">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+            <button type="submit" title="Send" class="send-button">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tool-icon">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                 </svg>
             </button>

diff --git a/...s/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatInput.razor.css b/...s/src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatInput.razor.css
@@ -1,7 +1,11 @@
 .input-box {
+    display: flex; 
+    flex-direction: column; 
     background: white;
     border: 1px solid rgb(229, 231, 235);
     border-radius: 8px;
+    padding: 0.5rem 0.75rem;
+    margin-top: 0.75rem; 
 }
 
     .input-box:focus-within {
@@ -19,8 +23,20 @@ textarea {
         --send-button-color: #aaa;
     }
 
+.tools {
+    display: flex; 
+    margin-top: 1rem; 
+    align-items: center;
+}
+
+.tool-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
 .send-button {
     color: var(--send-button-color);
+    margin-left: auto;
 }
 
     .send-button:hover {

diff --git a/...src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageItem.razor b/...src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageItem.razor
@@ -4,7 +4,7 @@
 
 @if (Message.Role == ChatRole.User)
 {
-    <div class="user-message text-gray-800 px-5 py-2 rounded whitespace-pre-wrap">
+    <div class="user-message">
         @Message.Text
     </div>
 }
@@ -14,16 +14,16 @@ else if (Message.Role == ChatRole.Assistant)
     {
         if (content is TextContent { Text: { Length: > 0 } text })
         {
-            <div class="assistant-message grid grid-rows-2 gap-1">
+            <div class="assistant-message">
                 <div>
-                    <div class="text-white w-6 h-6 rounded-full flex items-center justify-center bg-[#9b72ce]">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                    <div class="assistant-message-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
                         </svg>
                     </div>
                 </div>
-                <div class="font-semibold">Assistant</div>
-                <div class="col-start-2">
+                <div class="assistant-message-header">Assistant</div>
+                <div class="assistant-message-text">
                     <assistant-message markdown="@text"></assistant-message>
 
                     @foreach (var citation in citations ?? [])
@@ -35,18 +35,18 @@ else if (Message.Role == ChatRole.Assistant)
         }
         else if (content is FunctionCallContent { Name: "Search" } fcc && fcc.Arguments?.TryGetValue("searchPhrase", out var searchPhrase) is true)
         {
-            <div class="assistant-message grid grid-rows-2 gap-1 text-sm">
-                <div class="w-6 h-6 flex items-center justify-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <div class="assistant-search">
+                <div class="assistant-search-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                     </svg>
                 </div>
-                <div class="content-center">
+                <div class="assistant-search-content">
                     Searching:
-                    <span class="font-semibold">@searchPhrase</span>
+                    <span class="assistant-search-phrase">@searchPhrase</span>
                     @if (fcc.Arguments?.TryGetValue("filenameFilter", out var filenameObj) is true && filenameObj is string filename && !string.IsNullOrEmpty(filename))
                     {
-                        <text> in </text><span class="font-semibold">@filename</span>
+                        <text> in </text><span class="assistant-search-phrase">@filename</span>
                     }
                 </div>
             </div>

diff --git a/...ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageItem.razor.css b/...ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageItem.razor.css
@@ -3,11 +3,67 @@
     align-self: flex-end;
     min-width: 25%;
     max-width: calc(100% - 5rem);
+    padding: 0.5rem 1.25rem;
+    border-radius: 0.25rem; 
+    color: #1F2937; 
+    white-space: pre-wrap; 
 }
 
-.assistant-message {
+.assistant-message, .assistant-search {
+    display: grid;
     grid-template-rows: min-content;
     grid-template-columns: 2rem minmax(0, 1fr);
+    gap: 0.25rem; 
+}
+
+.assistant-message-header {
+    font-weight: 600;
+}
+
+.assistant-message-text {
+    grid-column-start: 2;
+}
+
+.assistant-message-icon {
+    display: flex; 
+    justify-content: center; 
+    align-items: center; 
+    border-radius: 9999px; 
+    width: 1.5rem; 
+    height: 1.5rem; 
+    color: #ffffff; 
+    background: #9b72ce;
+}
+
+    .assistant-message-icon svg {
+        width: 1rem; 
+        height: 1rem; 
+    }
+
+.assistant-search {
+    font-size: 0.875rem;
+    line-height: 1.25rem; 
+}
+
+.assistant-search-icon {
+    display: flex; 
+    justify-content: center; 
+    align-items: center; 
+    width: 1.5rem; 
+    height: 1.5rem; 
+}
+
+    .assistant-search-icon svg {
+        width: 1rem; 
+        height: 1rem; 
+    }
+
+.assistant-search-content {
+    align-content: center;
+}
+
+.assistant-search-phrase {
+    font-weight: 600;
 }
 
 /* Default styling for markdown-formatted assistant messages */

diff --git a/...src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageList.razor b/...src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageList.razor
@@ -1,7 +1,7 @@
 @inject IJSRuntime JS
 
-<div class="my-8 mx-6 grow">
-    <chat-messages class="page-width flex flex-col gap-5" in-progress="@(InProgressMessage is not null)">
+<div class="message-list-container">
+    <chat-messages class="page-width message-list" in-progress="@(InProgressMessage is not null)">
         @foreach (var message in Messages)
         {
             <ChatMessageItem @key="@message" Message="@message" />

diff --git a/...ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageList.razor.css b/...ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatMessageList.razor.css
@@ -1,4 +1,15 @@
-.no-messages {
+.message-list-container {
+    margin: 2rem 1.5rem;
+    flex-grow: 1;
+}
+
+.message-list {
+    display: flex; 
+    flex-direction: column; 
+    gap: 1.25rem; 
+}
+
+.no-messages {
     text-align: center;
     font-size: 1.25rem;
     color: #999;

diff --git a/...src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatSuggestions.razor b/...src/ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatSuggestions.razor
@@ -2,7 +2,7 @@
 
 @if (suggestions is not null)
 {
-    <div class="page-width suggestions mb-3 text-right flex flex-wrap justify-end gap-2 whitespace-nowrap">
+    <div class="page-width suggestions">
         @foreach (var suggestion in suggestions)
         {
             <button class="btn-subtle" @onclick="@(() => AddSuggestionAsync(suggestion))">

diff --git a/...ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatSuggestions.razor.css b/...ChatWithCustomData/ChatWithCustomData.Web/Components/Pages/Chat/ChatSuggestions.razor.css
@@ -0,0 +1,9 @@
+.suggestions {
+    text-align: right;
+    white-space: nowrap;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    display: flex;
+    margin-bottom: 0.75rem;
+}