Implement a warning tooltip for the @ context button when no context files are available

Author: robertpiosik

packages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss

@@ -208,6 +208,7 @@
     display: flex;
 
     &__button {
+      position: relative;
       --size: 20px;
       display: flex;
       align-items: center;
@@ -226,6 +227,41 @@
         fill: var(--vscode-icon-foreground);
       }
     }
+
+    &__at-sign-warning {
+      position: absolute;
+      z-index: 1;
+      bottom: calc(100% + 3px);
+      left: 0;
+      transform: translateX(-4px);
+      font-size: var(--font-size-12px);
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: var(--padding-4px);
+      padding: var(--padding-3px) var(--padding-6px);
+      border-radius: var(--border-radius-6px);
+      background-color: var(--vscode-quickInput-background);
+      border: 1px solid var(--vscode-widget-border);
+      box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
+
+      &::before {
+        font-family: 'codicon';
+        content: '\ea6c';
+        color: var(--vscode-problemsWarningIcon-foreground);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -5px;
+        left: 8px;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid var(--vscode-quickInput-background);
+        filter: drop-shadow(0 1px 0.5px var(--vscode-widget-border));
+      }
+    }
   }
 
   &__right {

packages/ui/src/components/editor/panel/ChatInput/ChatInput.tsx

@@ -53,6 +53,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   const input_ref = useRef<HTMLDivElement>(null)
   const container_ref = useRef<HTMLDivElement>(null)
   const [caret_position, set_caret_position] = useState(0)
+  const [show_at_sign_tooltip, set_show_at_sign_tooltip] = useState(false)
   const {
     is_dropdown_open,
     toggle_dropdown,
@@ -217,6 +218,15 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
       document.removeEventListener('selectionchange', on_selection_change)
   }, [props.on_caret_position_change, props.value, props.context_file_paths])
 
+  useEffect(() => {
+    if (show_at_sign_tooltip) {
+      const timer = setTimeout(() => {
+        set_show_at_sign_tooltip(false)
+      }, 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [show_at_sign_tooltip])
+
   const placeholder = useMemo(() => {
     const active_history = props.chat_history
 
@@ -439,11 +449,25 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             }}
           >
             <button
-              onClick={() => props.on_at_sign_click()}
+              onClick={() => {
+                if (
+                  !props.context_file_paths ||
+                  props.context_file_paths.length === 0
+                ) {
+                  set_show_at_sign_tooltip(true)
+                } else {
+                  props.on_at_sign_click()
+                }
+              }}
               className={cn(styles['footer__left__button'])}
               title="Reference file"
             >
               <Icon variant="AT_SIGN" />
+              {show_at_sign_tooltip && (
+                <div className={styles['footer__left__at-sign-warning']}>
+                  Nothing is selected in context.
+                </div>
+              )}
             </button>
             {!props.is_in_code_completions_mode && (
               <button