refactor: Update styles and improve component structure (#373)

* refactor: Update styles and improve component structure

- Adjusted CSS styles for better layout and spacing in chat components.
- Refactored ChatUserInput component to streamline rendering of mentionable badges.
- Modified MCPManager to ensure subscribers are notified after cache invalidation.
- Updated request type definitions to enforce properties in FunctionDescription.
- Enhanced response generation to ensure parameters are correctly structured.

* feat: Add settings callout for tool usage warnings

- Introduced a new callout in the MCP settings section to inform users about potential costs associated with tool responses.
- Updated CSS styles for the callout to enhance visibility and layout.

Author: kevin-on

src/components/chat-view/chat-input/ChatUserInput.tsx

@@ -202,43 +202,41 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
 
     return (
       <div className="smtcmp-chat-user-input-container" ref={containerRef}>
-        {mentionables.length > 0 && (
-          <div className="smtcmp-chat-user-input-files">
-            <ToolBadge />
-            {mentionables.map((m) => (
-              <MentionableBadge
-                key={getMentionableKey(serializeMentionable(m))}
-                mentionable={m}
-                onDelete={() => handleMentionableDelete(m)}
-                onClick={() => {
-                  const mentionableKey = getMentionableKey(
-                    serializeMentionable(m),
+        <div className="smtcmp-chat-user-input-files">
+          <ToolBadge />
+          {mentionables.map((m) => (
+            <MentionableBadge
+              key={getMentionableKey(serializeMentionable(m))}
+              mentionable={m}
+              onDelete={() => handleMentionableDelete(m)}
+              onClick={() => {
+                const mentionableKey = getMentionableKey(
+                  serializeMentionable(m),
+                )
+                if (
+                  (m.type === 'current-file' ||
+                    m.type === 'file' ||
+                    m.type === 'block') &&
+                  m.file &&
+                  mentionableKey === displayedMentionableKey
+                ) {
+                  // open file on click again
+                  openMarkdownFile(
+                    app,
+                    m.file.path,
+                    m.type === 'block' ? m.startLine : undefined,
                   )
-                  if (
-                    (m.type === 'current-file' ||
-                      m.type === 'file' ||
-                      m.type === 'block') &&
-                    m.file &&
-                    mentionableKey === displayedMentionableKey
-                  ) {
-                    // open file on click again
-                    openMarkdownFile(
-                      app,
-                      m.file.path,
-                      m.type === 'block' ? m.startLine : undefined,
-                    )
-                  } else {
-                    setDisplayedMentionableKey(mentionableKey)
-                  }
-                }}
-                isFocused={
-                  getMentionableKey(serializeMentionable(m)) ===
-                  displayedMentionableKey
+                } else {
+                  setDisplayedMentionableKey(mentionableKey)
                 }
-              />
-            ))}
-          </div>
-        )}
+              }}
+              isFocused={
+                getMentionableKey(serializeMentionable(m)) ===
+                displayedMentionableKey
+              }
+            />
+          ))}
+        </div>
 
         <MentionableContentPreview
           displayedMentionableKey={displayedMentionableKey}

src/components/settings/sections/McpSection.tsx

@@ -57,6 +57,14 @@ export function McpSection({ app, plugin }: McpSectionProps) {
     <div className="smtcmp-settings-section">
       <div className="smtcmp-settings-header">MCP (Model Context Pool)</div>
 
+      <div className="smtcmp-settings-desc smtcmp-settings-callout">
+        <strong>Warning:</strong> When using tools, the tool response is passed
+        to the language model (LLM). If the tool result contains a large amount
+        of content, this can significantly increase LLM usage and associated
+        costs. Please be mindful when enabling or using tools that may return
+        long outputs.
+      </div>
+
       {mcpManager?.disabled ? (
         <div className="smtcmp-settings-sub-header-container">
           <div className="smtcmp-settings-sub-header">

src/core/mcp/mcpManager.ts

@@ -172,8 +172,8 @@ export class McpManager {
     }
 
     this.servers = nextServers
-    this.notifySubscribers()
     this.availableToolsCache = null // Invalidate available tools cache
+    this.notifySubscribers() // Should call after invalidating the cache
   }
 
   private async connectServer(

src/types/llm/request.ts

@@ -106,6 +106,6 @@ type FunctionDescription = {
   name: string
   parameters: {
     type: 'object'
-    properties?: Record<string, unknown>
+    properties: Record<string, unknown>
   }
 }

src/utils/chat/responseGenerator.ts

@@ -154,7 +154,10 @@ export class ResponseGenerator {
           function: {
             name: tool.name,
             description: tool.description,
-            parameters: tool.inputSchema,
+            parameters: {
+              ...tool.inputSchema,
+              properties: tool.inputSchema.properties ?? {},
+            },
           },
         }))
       : undefined

styles.css

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: calc(var(--size-4-1) * -1);
+  margin-bottom: var(--size-4-2);
 }
 
 .smtcmp-chat-header-title {
@@ -149,8 +149,8 @@ button:not(.clickable-icon).smtcmp-chat-list-dropdown {
   display: flex;
   flex-direction: column;
   gap: var(--size-4-1);
-  padding: 0 var(--size-4-3) var(--size-4-5) var(--size-4-3);
-  margin: var(--size-4-2) calc(var(--size-4-3) * -1) 0;
+  padding: var(--size-4-1);
+  margin: calc(var(--size-4-1) * -1);
 
   .smtcmp-chat-messages-user {
     display: flex;
@@ -1187,6 +1187,12 @@ button.smtcmp-chat-input-model-select {
   margin: var(--size-4-1) 0;
 }
 
+.smtcmp-settings-callout {
+  padding-inline-start: var(--size-4-2);
+  border-inline-start: var(--blockquote-border-thickness) solid
+    var(--blockquote-border-color);
+}
+
 .smtcmp-settings-required::after {
   color: var(--color-red);
   content: '*';
@@ -1499,7 +1505,6 @@ button.smtcmp-chat-input-model-select {
   flex-direction: column;
   align-items: stretch;
   gap: var(--size-4-1);
-  background: var(--background-modifier-form-field);
   padding: var(--size-4-1);
   font-size: var(--font-ui-small);
 }